Ajax 的 GET 和 POST 模式

理解Ajax异步请求数据方式：GET与POST

最新推荐文章于 2025-12-11 22:13:48 发布

最新推荐文章于 2025-12-11 22:13:48 发布 · 87 阅读

文章标签：

#php #javascript #ViewUI

本文详细介绍了Ajax异步请求数据的两种方式：GET和POST。通过示例展示了如何在HTML和PHP中实现这两种模式，并解释了它们之间的区别。包括GET和POST模式下的参数传递、编码处理及响应解析。

Ajax 异步请求数据的方式有两种：GET 和 POST。

如果是 GET 模式，则直接将数据放置到异步请求的 URL 地址中，而 send() 方法不发送任何数据；

var queryString = "name=Liruxing&sex=man"; var url = "index.php" + queryString + "time=" + new Date().getTime(); xmlHttp.open('GET',url); xmlHttp.send(null);
如果是 POST 模式，则将数据放置在 send() 方法中发送。

var queryString = "name=Liruxing&sex=man"; var url = "index.php" + new Date().getTime(); xmlHttp.open('POST',url); xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttp.send(queryString);

下面的示例能够更清楚的演示 GET 模式和 POST 模式的区别（Ajax 结合 PHP）

index.html

<html> <head> <title>Ajax</title> <script language="javascript"> var xmlHttp; // 创建 XMLHttpRequest function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function createQueryString() { var name = document.getElementById('name').value; var sex = document.getElementById('sex').value; var queryString = "name="+ name +"&sex=" + sex; return encodeURI(encodeURI(queryString)); // 两次编码解决中文乱码问题 } function handleStateChange() { if (xmlHttp.readyState==4 && xmlHttp.status==200) { var content = document.getElementById("content"); content.innerHTML = ''; content.innerHTML = decodeURI(xmlHttp.responseText); // 解码 } } // GET 方法 function doRequestUsingGet() { createXMLHttpRequest(); var url = "index.php?" + createQueryString() + "&time=" + new Date().getTime(); xmlHttp.open('GET', url); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.send(null); } // POST 方法 function doRequestUsingPost() { createXMLHttpRequest(); var url = "index.php?time=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open('POST', url); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttp.send(queryString); } </script> </head> <body> <p>Name:<input type="text" id="name" /></p> <p>Sex :<input type="text" id="sex" /></p> <p><input type="button" value="GET" onClick="doRequestUsingGet()"> <input type="button" value="POST" onClick="doRequestUsingPost()"></p> <div id="content"></div> </body> </html>

index.php

<?php header('Content-Type:text/html;Charset=GB2312'); $method = $_SERVER['REQUEST_METHOD']; if ($method == 'GET') { echo "GET：".$_GET['name'].",".$_GET['sex']; } else if ($method == 'POST') { echo "POST：".$_POST['name'].",".$_POST['sex']; } ?>