碼上歡樂
相關內容    簡體    繁體

jQuery Ajax總結

本文轉載自   查看原文   2016-11-15 23:57   5065    jQuery/ Ajax

jQuery對Ajax的操作進行了封裝。jQuery中\(.ajax()屬於最底層的方法，這個放在后面說，首先看看封裝了\).ajax()的方法。

load()方法

load()可以遠程載入HTML並插入到DOM中。結構為：

load(url [,data] [,callback])
  • url(String):服務端資源的url。
  • data(Obejct):發送到服務器的key/value數據
  • callback(Function):請求完成時(無論成功或失敗)的回調函數，在響應數據已經加載到包裝集元素之后被調用。傳入這個函數的參數是響應文本、狀態碼、以及xhr實例。

加載HTML文檔

首先構造一個要被load()方法加載的新聞評論頁面，comment.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最新評論</title>
</head>
<body>
    <div class="comment">
        <p>
            <a href="#" class="username">張三</a>
            <span class="location">[北京市網友]</span>
        </p>

        <p class="contentTxt">一樓給度娘</p>
    </div>

    <div class="comment">
        <p>
            <a href="#" class="username">李四</a>
            <span class="location">[山東省濟南市網友]</span>
        </p>

        <p class="contentTxt">沒搶到沙發</p>
    </div>

    <div class="comment">
        <p>
            <a href="#" class="username">王五</a>
            <span class="location">[河南省鄭州市網友]</span>
        </p>

        <p class="contentTxt">頂頂頂頂頂</p>
    </div>
</body>
</html>

然后創建load.html，添加一個button按鈕觸發Ajax事件，將加載進來的HTML內容存放到id為“resText”的元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
			// 點擊按鈕，觸發加載動作
            $("#btn").click(function () {
				// 將comment.html加載進id為“resText”的元素里
                $("#resText").load("comment.html");
            });
        })
    </script>
</head>
<body>
    <input type="button" id="btn" value="load評論">
    <div>最新評論：</div>
    <div id="resText"></div>
</body>
</html>

load()的url參數的語法結構為“url selector”，可以加載指定的內容。例如，加載comment.html頁面中class為“contentTxt”的內容：

$("#resText").load("comment.html .contentTxt");

load()的傳遞方式根據參數data來自動指定。如果沒有參數，則采用GET方式傳遞，否則，會自動轉換為POST方式。

回調函數

在load方法中，無論ajax請求是否成功，請求完成(complete)后，回調函數就會被觸發，對應$.ajax()中的complete回調函數。

$("#resText").load("comment.html", function (responseText, textStatus, XMLHttpRequest) {
	alert(responseText);		// 請求返回的內容
    alert(textStatus);			// 請求狀態
    alert(XMLHttpRequest);		// XMLHttpRequest對象
});

load()常用來從web服務器上獲取靜態的數據文件。如果要向服務器傳遞參數，可以使用\(.get()或\).post()方法。

\(.get()與\).post()

\(.get()使用GET進行異步請求。服務器的狀態和應用的模型數據不受GET操作的影響。無論進行多少次GET操作，返回的結果是完全一致的。\).post()發送到服務器的數據可以用來修改應用的模型狀態。例如，可以添加或刪除信息。

$.get()

$.get()結構為：

$.get(url [, data] [, callback] [, type])

$.get()參數說明：

  • url(String):請求的服務器端資源的url
  • data(Object):以key/value的形式構造查詢字符串追加到url
  • callback(Function):在請求成功(success)時被調用。將請求結果和狀態傳遞給該方法。
  • type(String):服務器端返回內容的格式

HTML文檔

下面添加評論的html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#send").click(function () {
                // 點擊按鈕觸發get請求
                $.get("get1.jsp", {
                    // 向服務器傳遞參數，encodeURI進行完整編碼
                    username: encodeURI($("#username").val()),
                    location: encodeURI($("#location").val()),
                    contentTxt: encodeURI($("#contentTxt").val())
                }, function (data, textStatus) {
                    // alert(textStatus);   // 返回請求狀態
                    // alert(decodeURI(data)); // 返回請求的狀態
					// 將返回的數據添加到id為“resText”的元素中
                    $("#resText").html(decodeURI(data));
                })
            });
        })
    </script>
</head>
<body>
<form id="form1">
    <p>添加評論:</p>

    <p>姓名:<input type="text" name="username" id="username"></p>

    <p>位置:<input type="text" name="location" id="location"></p>

    <p>內容:<textarea name="contentTxt" id="contentTxt"></textarea></p>

    <p><input type="button" id="send" value="提交"></p>

</form>
<div>最新評論：</div>
<div id="resText"></div>
</body>
</html>

接下來構造get1.jsp，模擬服務器處理請求並返回數據：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String username = request.getParameter("username");
  String location = request.getParameter("location");
  String content = request.getParameter("contentTxt");

  out.println("<div class='comment'><a href='#' class='username'>" + username + "</a><span class='location'>"+ location +
	"</span></p><p class='contentTxt'>"+content+"</p></div>");
%>

然后需要將.jsp發布到tomcat等web容器進行訪問。

JSON數據

相對於xml文件而言，json相當簡潔、易讀。接下來看看服務器返回json形式的數據的情況。

客戶端頁面get2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#send").click(function () {
                $.get("get2.jsp", {

                    username: encodeURI($("#username").val()),
                    location: encodeURI($("#location").val()),
                    contentTxt: encodeURI($("#contentTxt").val())
                }, function (data, textStatus) {
                    alert(textStatus);
                    var username = data.username;
                    var location = data.location;
                    var contentTxt = data.contentTxt;
                    username = decodeURI(username);
                    location = decodeURI(location);
                    contentTxt = decodeURI(contentTxt);
                    var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username +
                            "</a><span class='location'>" + location +
                            "</span></p><p class='contentTxt'>" + contentTxt + "</p></div>";
                    $("#resText").html(txtHtml);// 將返回的數據添加到頁面
                }, "json");
            })

        })
    </script>
</head>
<body>
<form id="form1">
    <p>添加評論:</p>

    <p>姓名:<input type="text" name="username" id="username"></p>

    <p>位置:<input type="text" name="location" id="location"></p>

    <p>內容:<textarea name="contentTxt" id="contentTxt"></textarea></p>

    <p><input type="button" id="send" value="get提交"></p>

</form>
<div>最新評論：</div>
<div id="resText"></div>
</body>
</html>

上面encodeURI()是用於編碼，否則中文就無法解析，這個希望以后有時間再總結，這里先記住。回調函數的第4個參數(type)設置為“json”,代表期待服務器返回的數據格式。

需要添加json-lib.jar，用於構造json格式的數據。get2.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%
    String username = request.getParameter("username");
    String location = request.getParameter("location");
    String contentTxt = request.getParameter("contentTxt");
    JSONObject json = new JSONObject();
    json.put("username", username);
    json.put("location", location);
    json.put("contentTxt", contentTxt);

    out.println(json);

%>

json的格式非常嚴格，任何一個括號的不匹配或缺失都會導致頁面的腳本終止運行。上面通過java代碼首先創建了一個json對象。如果通過拼接的方式構造json數據，必須是標准的json格式：

out.println("{\"username\":\""+ username+ "\",\"location\":\"" + location + "\", \"contentTxt\":\""+ contentTxt+"\"  }");

$.post()

除了對服務器的狀態和應用的模型數據的影響，\(.get()和\).post()還有以下區別：

  • GET請求會將參數跟在url后進行傳遞，POST請求則作為HTTP消息的實體內容發送給Web服務器。在ajax中這種區別對用戶是不可見的。
  • GET對傳輸的數據大小有限制(通常不大於2kb)，使用POST方式傳遞的數據量比GET大得多(理論上不受限制)
  • GET方式請求的數據會被瀏覽器緩存，這種情況可能帶來安全問題。

\(.get()和\).post()的結構和使用方式都相同。

\(.getScript()和\).getJson()

$.getScript()

$.getScript()用來加載.js文件，與加載一個HTML片段一樣，js文件會自動執行。

將$.load()的comment.html頁面改寫為js文件，將評論添加到id為“resText”的元素中。js1.js:

var comments = [
    {
        "username": "張三",
        "location": "[北京市網友]",
        "contentTxt": "一樓獻度娘"
    },
    {
        "username": "李四",
        "location": "[山東省濟南市網友]",
        "contentTxt": "沒搶到沙發"
    },
    {
        "username": "王五",
        "location": "[河南省鄭州市網友]",
        "contentTxt": "頂頂頂頂頂"
    }
];

var html = '';

$.each(comments, function (index, comment) {
    html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
        "</a><span class='location'>" + comment['location'] +
        "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});

$("#resText").html(html);

$.getScript()直接加載進js，並自動執行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
			// 點擊按鈕加載js1.js文件
            $("#send").click(function () {
                $.getScript("js1.js");
            })
        })
    </script>
</head>
<body>

    <p>
        <input type="button" id="send" value="加載script">
    </p>

    <div class="comment">最新評論：</div>
    <div id="resText"></div>
</body>
</html>

$.getJSON()

\(.getJSON()用於加載JSON文件，用法與\).getScript()相同。

json數據：

[
  {
    "username": "張三",
    "location": "[北京市網友]",
    "contentTxt": "一樓獻度娘"
  },
  {
    "username": "李四",
    "location": "[山東省濟南市網友]",
    "contentTxt": "沒搶到沙發"
  },
  {
    "username": "王五",
    "location": "[河南省鄭州市網友]",
    "contentTxt": "頂頂頂頂頂"
  }
]

jquery代碼：

$(function () {
    $("#send").click(function () {
        $.getJSON("demo.json", function (data) {
            $("#resText").empty();
            var html = '';
            $.each(data, function (index, comment) {
                html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
                        "</a><span class='location'>" + comment['location'] +
                        "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
            });

            $("#resText").html(html);
        });
    })
});

$.ajax()方法

$.ajax()是jquery最底層的實現。

$.ajax(options)

這個方法只包含了1個參數,這個參數里面包含了$.ajax()所需要的請求設置以及回調函數，參數以key/value形式存在。

$.ajax()參數說明：

  • url(String):發送請求地址。

  • type(String):請求方式(POST或GET)，默認為GET。其他HTTP請求方法如PUT、DELETE，僅部分瀏覽器支持。

  • data(Object或String):發送到服務器的數據。如果不是字符串，將自動轉換為字符串格式。GET請求中將附加在url后。對象必須是key/value格式，例如{id:"xxyh", password:"123456"}轉換為&id=xxyh&password=123456。如果是數組，將自動為不同值對應同一個名稱。例如{name:["xxyh","dudu"]}轉換為&name=xxyh&name=dudu。

  • dataType(String):預期服務器返回的數據類型。如果不指定，jquery將根據HTTP包MINE信息返回responseXML或responseText,並作為回調函數參數傳遞。可用類型：

    • xml:返回XML文檔，可用jquery處理
    • html:返回純文本HTML信息，包含的script標簽會插入DOM時執行。
    • script:返回純文本JavaScript代碼。如果沒有設置cache參數，不會自動緩存結果。在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。
    • json:返回JSON數據。
    • jsonp:JSONP格式。使用JSONP形式調用函數時，例如myurl?callback=?,jquery將自動替換后一個“?”為正確的函數名，以執行回調函數。
    • text:返回純文本字符串。

  • complete(Function):請求完成后回調函數(請求成功或失敗后均調用)。

    參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

      function(XMLHttpRequest,textStatus){
  	this;	// 調用本次Ajax請求時傳遞的options參數
  }

  • success(Function):請求成功回調函數。有2個參數：

    參數：由服務器返回，並根據dataType參數進行處理后的數據和描述狀態的字符串。

      function(data, textStatus) {
  	// data 可能是xmlDoc,jsonObj,html,text等
  	this;	// 調用本次Ajax請求時傳遞的options參數
  }

  • error(Function):請求失敗時被調用的函數。這個函數有3個參數，即XMLHttpRequest對象、錯誤信息和捕獲的錯誤對象

      function(XMLHttpRequest, textStatus, errorThrown){
  	// 通常情況下textStatus和errorThrown只有一個包含信息
  	this;	// 調用本次Ajax請求時傳遞的options參數
  }

  • contentType(String):當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。

  • jsonp(String):在一個jsonp請求中重寫回調函數的名字。用來替代在“callback=?”這種GET或POST請求中URL參數里的“callback”部分，例如{jsonp:'onJsonPLoad'}會導致將“onJsonPLoad=?”傳給服務器。

獲取JSON數據

接下來通過$.ajax()獲取json數據。jquery代碼：

$(function () {
    $("#send").click(function () {
        $.ajax({
            type:"GET",
            url:"demo.json",
            dataType:"json",
            success: function (data) {
                $("#resText").empty();
                var html = "";
                $.each(data, function (commentIndex, comment) {
                    html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
                            "</a><span class='location'>" + comment['location'] +
                            "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
                });
                $("#resText").html(html);
            }
        })
    });
})


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery的ajax總結 jQuery中ajax 跳入error的原因總結 Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結 JQuery Ajax 在asp.net中使用總結 JQuery使用Ajax內存溢出問題總結 Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結 Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結 jQuery之AJAX jQuery ajax —— Baidu ajax jQuery(二) jQuery對Ajax的使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM