此文檔解決以下問題：
一、在當前html頁面顯示請求的數據
1.get方式請求 ,不傳遞參數
2.get方式請求 ,傳遞參數
3.post方式請求 ,不傳遞參數
4.post方式請求 ,傳遞參數
二、通過按鈕跳轉到php頁面顯示請求的數據
5.get方式請求 ,傳遞參數
1.get方式請求 ,不傳遞參數
1）index01.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax異步傳輸基本步驟
function XMLhttpr () {
//1.創建XMLHttpRequest對象
//XMLHttpRequest 對象用於和服務器交換數據。
//為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。
//如果支持，則創建 XMLHttpRequest 對象。
//如果不支持，則創建 ActiveXObject ：
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.規定請求
//open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
//method：請求的類型；GET 或 POST
//url：文件在服務器上的位置
//async：true（異步）或 false（同步）
//以get方式請求 php文件 不傳遞參數
xhtp.open("GET","test.php",true);
//3.發送請求
//send(string) 將請求發送到服務器。
//string：僅用於 POST 請求
xhtp.send();
//4.響應請求
//onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
xhtp.onreadystatechange=function () {
//readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
//0: 請求未初始化
//1: 服務器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應已就緒
//status 狀態
//200: "OK"
//404: 未找到頁面
if(xhtp.readyState==4 && xhtp.status==200)
//當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
//responseText 獲得字符串形式的響應數據。
//responseXML 獲得 XML 形式的響應數據。
$("#myDiv").html(xhtp.responseText);//在當前頁面顯示php文件的數據
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="提交" />
<br />
結果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test.php頁面代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
//php 語法
//echo 輸出
//php可以嵌套到html中
//php的連接符是. 不是+
//$_GET['name'] 獲取get方式請求的參數 參數要用單引號
//isset() 判斷該函數中的參數值是否存在
echo "get請求，不傳遞參數<br/>";
echo "來自php的數據";
echo "<br/>";
?>
</p>
</body>
</html>
3）運行結果：
2.get方式請求 ,傳遞參數
1）index02.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax異步傳輸基本步驟
function XMLhttpr () {
//1.創建XMLHttpRequest對象
//XMLHttpRequest 對象用於和服務器交換數據。
//為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。
//如果支持，則創建 XMLHttpRequest 對象。
//如果不支持，則創建 ActiveXObject ：
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.規定請求
//open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
//method：請求的類型；GET 或 POST
//url：文件在服務器上的位置
//async：true（異步）或 false（同步）
//以get方式請求 php文件 傳遞參數
xhtp.open("GET","test02.php?name="+$("#txtname").val()+"&"+"age="+$("#txtage").val(),true);
//3.發送請求
//send(string) 將請求發送到服務器。
//string：僅用於 POST 請求
xhtp.send();
//4.響應請求
//onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
xhtp.onreadystatechange=function () {
//readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
//0: 請求未初始化
//1: 服務器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應已就緒
//status 狀態
//200: "OK"
//404: 未找到頁面
if(xhtp.readyState==4 && xhtp.status==200)
//當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
//responseText 獲得字符串形式的響應數據。
//responseXML 獲得 XML 形式的響應數據。
$("#myDiv").html(xhtp.responseText);//在當前頁面顯示php文件的數據
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年齡：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="button" name="btn" id="btn" value="提交" />
<br />
結果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test02.php頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
//$_GET['name'] 獲取get方式請求的參數 參數要用單引號
//isset() 判斷該函數中的參數值是否存在
echo "get請求，傳遞參數<br/>";
echo "來自php的數據";
echo "<br/>";
if(isset($_GET['name'])){
echo "hello,".$_GET['age']."歲的".$_GET['name'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）運行結果：
3.post方式請求 ,不傳遞參數
1）index03.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax異步傳輸基本步驟
function XMLhttpr () {
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.規定請求
xhtp.open("POST","test03.php",true);
//3.發送請求
xhtp.send();
//4.響應請求
xhtp.onreadystatechange=function () {
$("#myDiv").html(xhtp.responseText);//在當前頁面顯示php文件的數據
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="提交" />
<br />
結果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test03.php頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
echo "post請求請求，不傳遞參數<br/>";
echo "來自php的數據";
echo "<br/>";
?>
</p>
</body>
</html>
3）運行結果：
4.post方式請求 ,傳遞參數
1）index04.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax異步傳輸基本步驟
function XMLhttpr () {
//1.創建XMLHttpRequest對象
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.規定請求
xhtp.open("POST","test04.php",true);
xhtp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xhtp.send("name=Henry&age=18");
xhtp.send("name="+$("#txtname").val()+"&"+"age="+$("#txtage").val());
//3.發送請求
//xhtp.send();
//4.響應請求
xhtp.onreadystatechange=function () {
if(xhtp.readyState==4 && xhtp.status==200)
$("#myDiv").html(xhtp.responseText);//在當前頁面顯示php文件的數據
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年齡：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="button" name="btn" id="btn" value="提交" />
<br />
結果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test04.php頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
echo "post請求請求，傳遞參數<br/>";
echo "來自php的數據";
echo "<br/>";
if(isset($_POST['name'])){
echo "hello,".$_POST['age']."歲的".$_POST['name'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）運行結果：
5.get方式請求 ,傳遞參數
1）index05.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="test05.php" method="get" id="myform">
姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年齡：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="submit" name="btn" id="btn" value="提交" />
<br />
結果：<div id="myDiv"></div>
<br />
</form>
</body>
</html>
2）test05.php頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
//echo 輸出
//$_GET['name'] 獲取get方式請求的參數 參數要用單引號
//isset() 判斷該函數中的參數值是否存在
//如果通過submit按鈕提交表單，則在php中通過$_GET或$_POST獲取的參數名應該是input元素的name屬性
echo "get請求，傳遞參數<br/>";
echo "來自php的數據";
echo "<br/>";
if(isset($_GET['txtname'])){
echo "hello,".$_GET['txtage']."歲的".$_GET['txtname'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）運行結果：
正文結束！~~