本篇文章給大家詳細介紹一下Ajax請求的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
AJAX 即「Asynchronous Javascript And XML」(非同步 JavaScript 與 XML),指建立互動式網頁應用程式的網頁開發技術。
AJAX是一種瀏覽器透過 js 非同步發起請求,實作局部更新頁面。 Ajax 要求的局部更新,瀏覽器網址列不會發生變化,局部更新不會捨棄原來頁面的內容。
AJAX
請求的範例<script> //这个按钮绑定的函数,使用js发起Ajax请求,访问服务器AjaxServlet中JavaScriptAjax function ajaxRequest() {// 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest();// 2、调用open方法设置请求参数 xmlHttpRequest.open("GET","http://localhost:8080/json_Ajax_i18n/ajaxServlet?action=javaScriptAjax",true);// 3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。 xmlHttpRequest.onreadystatechange = function () { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var jsonObj = JSON.parse(xmlHttpRequest.responseText); //把响应的数据显示在页面上 document.getElementById("p01").innerText = "编号:" + jsonObj.id + ",姓名:" + jsonObj.name ; } }// 4、调用send方法发送请求 xmlHttpRequest.send(); } </script>
AJAX
請求<script type="text/javascript"> //这个按钮绑定的函数,使用js发起Ajax请求,访问服务器AjaxServlet中JavaScriptAjax function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlHttpRequest.open("GET","http://localhost:8080/json_Ajax_i18n/ajaxServlet?action=javaScriptAjax",true); // 3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。 xmlHttpRequest.onreadystatechange = function () { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var jsonObj = JSON.parse(xmlHttpRequest.responseText); //把响应的数据显示在页面上 document.getElementById("div01").innerText = "编号:" + jsonObj.id + ",姓名:" + jsonObj.name ; } } // 4、调用send方法发送请求 xmlHttpRequest.send(); } </script>
// ajax--get请求 $("#getBtn").click(function(){ $.get("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { alert("服务器返回的数据是:" + data); },"json"); }); // ajax--post请求 $("#postBtn").click(function(){ // post请求 $.post("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { alert("服务器返回的数据是:" + data); },"json"); });
// ajax--getJson请求 $("#getJSONBtn").click(function(){ // 调用 $.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { alert("服务器返回的数据是:" + data); }); });
表單序列化serialize()
可以把表單中所有表單項目的內容都取得到,並且以name=value&name=value
的形式進行拼接。
// ajax请求 $("#submit").click(function(){ // 把参数序列化 //$("#form01").serialize(); $.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { }); });
【推薦學習:javascript進階教學】
以上是如何使用Ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!