原生ajax显示php后台内容

ajax是为不跳转页面与后台交互数据。

如下是一例不用跳转显示数据。

新建一个PHP页面index.php。如下代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<?php
//javascript:void(0)防止跳到页头
echo "<p><a href='javascript:void(0)' onclick=load()>ajax</a>  </p>";
echo "<span id='lis'></span>";
?>
<script type="text/javascript">
function load()//是为js原生ajax
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("lis").innerHTML=xmlhttp.responseText;
    }
  }
var url="";
url="fing.php?";

url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,true);

xmlhttp.send();
}
</script>
</body>
</html>

然后再新建一个fing.php。如下


<?php
//后台的值
$m="helloajax";
echo $m;//显示
?>

未点击时

点击后不跳转直接显示。

12-27如果要传送json数据呢？稍微改一下。

后台php页面


<?php
$data['a']="这是AJAX";
$data['b']="传送的JSAON";

echo json_encode($data,JSON_UNESCAPED_UNICODE); 
?>

jsajax

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<?php
//javascript:void(0)防止跳到页头
echo "<p><a href='javascript:void(0)' onclick=load()>ajax</a>  </p>";
echo "<span id='lis'></span>";
?>
<script type="text/javascript">
function load()//是为js原生ajax
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var json=xmlhttp.responseText;
      json=eval("("+json+")");
    document.getElementById("lis").innerHTML=json['a']+","+json['b'];
    }
  }
var url="";
url="fing.php?";

url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,true);

xmlhttp.send();
}
</script>
</body>
</html>

运行如下

来源：oschina

链接：https://my.oschina.net/u/2761175/blog/784779

标签

ajax

php

php跳转

xmlhttp

javascript

url