原生ajax显示php后台内容

时间 2019-11-11

标签原生 ajax 显示 php 后台内容栏目 Ajax 繁體版

原文原文链接

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

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

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

<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。以下java

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

未点击时ajax

点击后不跳转直接显示。json

12-27若是要传送json数据呢？稍微改一下。dom

后台php页面ui

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

echo json_encode($data,JSON_UNESCAPED_UNICODE); 
?>

jsajaxurl

<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>

运行以下spa