使用jQuery傳送Ajax請求

阿新 • • 發佈：2019-01-17

　　傳統網頁與伺服器通訊往往需要通過提交整個表單來實現，這樣使用者不得不每次在提交表單時重刷整個頁面，帶來很不好的使用者體驗，在這個背景下Ajax應運而生。
　　AJAX 即Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。Ajax不是新的程式語言，而是一種使用現有標準的新方法。Ajax能在不重新載入整個頁面的情況下，與伺服器進行資料交換，實現網頁區域性重新整理。AJAX是與伺服器交換資料並更新部分網頁的藝術。更多Ajax的基本概念和語法可以參考 w3cschool的Ajax教程。
　　
　　使用JavaScript傳送Ajax請求需要使用XMLHttpRequest物件，但是這種方式比較繁瑣，需要較大的程式碼量。更多關於JavaScript可以訪問

w3cschool的JavaScript教程。jQuery是JavaScript的一個庫,極大簡化了JS的程式設計，其中就包含了對Ajax請求的封裝。更多詳細的jQuery語法可以訪問w3cschool的jQuery教程。
　　只要瞭解了基本的JS語法和Ajax的基本概念、jQuery選擇器的使用，jQuery很快就能上手，使用起來非常方便。使用jQuery需要先到jQuery官網下載你所需的jQuery庫,jQuery類和函式的可以查詢jQuery官方API文件。
　　此處輸入連結的描述

　　為此，筆者新建了一個Java web工程WebDemo，已上傳至Github的
WebDemo倉庫。在WebRoot目錄下有一個AjaxDemo.html包含了此次前端頁面的程式碼

AjaxDemo.html。src目錄下包含了響應網頁的伺服器端程式碼AjaxDemoServlet。
　　AjaxDemo.html的原始碼如下。jQuery程式碼包含在script標籤中，先引用了jQuery庫的地址。在文件準備就緒後，給GET按鈕和POST按鈕新增點選監聽事件。使用了jQuery的ajax([settings])函式去傳送Ajax請求，引數是一系列用於描述請求資訊的鍵值對。具體的函式描述請見jQuery-ajax-settings。
　　在傳送get請求時設定請求的方法為GET，請求的URL為服務端的AjaxDemoServlet，資料交換格式為JSON，並且實現兩個回撥函式，分別在響應成功和失敗時呼叫。如果服務請求成功，通過回撥函式將取到一個JSON格式的資料。本例中該JSON物件轉換為字串後為{“name”:”wenzhuang”,”task”:”java”},可以通過回撥函式使用data.name和data.task取到對應的值，並顯示網頁上。更多關於JSON請見

w3cschool的JSON教程。
　　在傳送post請求時，除了設定請求方法、請求URL，資料交換格式外，還需要設定一個JSON格式的資料作為請求實體傳送到服務端。這裡是取出使用者填在表單中的使用者名稱密碼，傳送到伺服器，再通過回撥函式取回服務端的驗證資訊，顯示在網頁上。網頁的執行效果及截圖請見README.md。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
  $("#getBtn").click(function(){
    $.ajax({
        type:"GET",
        url:"/WebDemo/servlet/AjaxDemoServlet",
        dataType:"json",
        success:function(data){
            $("#data").html(data.name + '的任務是' + data.task);
        },
        error:function(jqXHR){
             $("#data").html("發生錯誤:"+jqXHR.status);
        }
    });
  });

   $("#postBtn").click(function(){
      $.ajax({
        type:"POST",
        url:"/WebDemo/servlet/AjaxDemoServlet",
         data:{
           username:$("#username").val(),
           password:$("#password").val(),
        },
        dataType:"json",     
        success:function(data){
            if(data.state){
                $("#test").html(data.msg);
            }else{
                $("#test").html("驗證未通過:"+ data.msg);
            }
        },
        error:function(jqXHR){
             $("#test").html("發生錯誤:"+jqXHR.status);
        }
    });
  });
});
</script>
</head>
<body>

<div>
<button id="getBtn">GET</button>
<div id="data"></div>
</div>
<br>
<div>
<div>
<span>使用者名稱</span>
<input type="text" id="username">
</div>
<div>
<span>密　碼</span> 
<input type="text" id="password">
</div>
<button id="postBtn">POST</button>
<div id="test"></div>
</div>

</body>
</html>

使用jQuery傳送Ajax請求

利用JQuery傳送ajax請求進行站內搜尋

利用JQuery傳送ajax請求進行站內搜尋(Hibernate篇——超簡單系列)

使用jQuery傳送AJAX請求時在header中新增Token

使用jQuery傳送Ajax請求

jQuery傳送ajax請求，PHP響應ajax請求（含跨域）

[置頂] jQuery傳送ajax請求，一次點選重複提交

jquery傳送ajax請求

jquery的get方式傳送AJAX請求

jquery的post方式傳送AJAX請求

jquery的ajax方式傳送AJAX請求

MVC學習筆記之使用JQuery方式傳送Ajax請求呼叫後臺Controller

Vue2.5仿去哪兒app筆記二——swiper的自動構建傳送ajax請求父子元件傳值兄弟元件間資料傳遞

手動和自動傳送ajax請求

使用ANGULAR2的HTTP傳送AJAX請求

為什麼傳送ajax請求頁面也會重新整理呢？

接入天貓精靈auth2授權頁面https傳送ajax請求

js監測頁面關閉傳送Ajax請求（瀏覽器關閉登出使用者，清空session）

javaweb總結(九)--從jsp頁面傳送ajax請求，servlet接受引數並返回json資料

傳送ajax請求後收不到響應

原生ajax請求和jQuery的ajax請求

使用jQuery傳送Ajax請求

相關推薦