原生ajax顯示php後臺內容

時間 2019-11-11 標籤原生 ajax 顯示 php 後臺內容

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