JQuery封裝的ajax

  對於頁面一些效果，驗證等，咱們都是經過JavaScript語言進行完成的，可是它也就像咱們的Java代碼同樣，是最前臺語言最基礎的，而jQuery則是對js代碼進行封裝方便咱們前臺代碼的編寫，並且它還有一個很是大的優點就是解決了瀏覽器的兼容問題，這也是咱們使用它很是重要的緣由之一。

  而如今爲了知足用戶的需求，Ajax（Asynchronous JavaScript + XML）異步刷新起到了無可比擬的做用，之前寫Ajax操做，老是須要咱們想JDBC代碼同樣進行幾個必備的步驟：AJAX——核心XMLHttpRequest對象，而jQuery也對Ajax異步操做進行了封裝，這裏看一下幾種經常使用的方式。 

 

$.ajax，$.post， $.get， $.getJSON。

 

 

 一， $.ajax，這個是jquery對ajax封裝的最基礎步，經過使用這個函數能夠完成異步通信的全部功能。也就是說什麼狀況下咱們均可以經過此方法進行異步刷新的操做。可是它的參數較多，有的時候可能會麻煩一些。看一下經常使用的參數：      

 var configObj = {

       method   //數據的提交方式：get和post

       url   //數據的提交路勁

       async   //是否支持異步刷新，默認是true

       data    //須要提交的數據

       dataType   //服務器返回數據的類型，例如xml,String,Json等

       success    //請求成功後的回調函數

       error   //請求失敗後的回調函數

    }

 

$.ajax(configObj);//經過$.ajax函數進行調用。

 

           好，看一個實際的例子吧，看一個進行異步刪除的例子：

<span style="font-size:18px;">          // 刪除
                $.ajax({
                    type : "POST",  //提交方式
                    url : "${pageContext.request.contextPath}/org/doDelete.action",//路徑
                    data : {
                        "org.id" : "${org.id}"
                    },//數據，這裏使用的是Json格式進行傳輸
                    success : function(result) {//返回數據根據結果進行相應的處理
                        if ( result.success ) {
                            $("#tipMsg").text("刪除數據成功");
                            tree.deleteItem("${org.id}", true);
                        } else {
                            $("#tipMsg").text("刪除數據失敗");
                        }
                    }
                });
</span>

 

           二，$.post，這個函數其實就是對$.ajax進行了更進一步的封裝，減小了參數，簡化了操做，可是運用的範圍更小了。$.post簡化了數據提交方式，只能採用POST方式提交。只能是異步訪問服務器，不能同步訪問，不能進行錯誤處理。在知足這些狀況下，咱們能夠使用這個函數來方便咱們的編程，它的主要幾個參數，像method，async等進行了默認設置，咱們不能夠改變的。例子再也不介紹。

url:發送請求地址。

data:待發送 Key/value 參數。

callback:發送成功時回調函數。

type:返回內容格式，xml, html, script, json, text,_default。

 

        三，$.get，和$.post同樣，這個函數是對get方法的提交數據進行封裝，只能使用在get提交數據解決異步刷新的方式上，使用方式和上邊的也差很少。這裏再也不演示。

 

        四， $.getJSON，這個是進一步的封裝，也就是對返回數據類型爲Json進行操做。裏邊就三個參數，須要咱們設置，很是簡單：url,[data],[callback]。

 

        其實會了$.ajax方法，其它的就都會使用了，都是同樣的，其實很是簡單。

 

        可是這裏還有一個問題，比較麻煩，就是若是頁面數據量比較大，該怎麼辦呢？在常規表單的處理中，咱們使用框架Struts2能夠經過域驅動模式進行自動獲取封裝，那麼經過ajax,如何進行封裝呢？這裏JQuery有一個插件，Jquery Form，經過引入此js文件，咱們能夠模仿表單Form來支持Struts2的域驅動模式，進行自動數據的封裝。用法和$.ajax相似，看一下實際的例子，這裏寫一個保存用戶的前臺代碼：

<span style="font-size:18px;">  $(function(){
        var options = {
            beforeSubmit : function() {//處理之前須要作的功能
                $("tipMsg").text("數據正在保存，請稍候...");
                $("#insertBtn").attr("disabled", true);
            },
            success : function(result) {//返回成功之後須要的回調函數
                if ( result.success ) {
                    $("#tipMsg").text("機構保存成功");

                                       //這裏是對應的一棵樹，後邊會介紹到，
                    // 控制樹形組件，增長新的節點
                    var tree = window.parent.treeFrame.tree;
                    tree.insertNewChild("${org.id}", result.id, result.name);
                } else {
                    $("#tipMsg").text("機構保存失敗");
                }
                // 啓用保存按鈕
                $("#insertBtn").attr("disabled", false);
            },
            clearForm : true
        };

        $('#orgForm').ajaxForm(options); //經過Jquery.Form中的ajaxForm方法進行提交
    });
</span>

 

       這樣咱們就不用再進行數據data的封裝處理，大大簡化了咱們ajax的操做這樣異步刷新的操做。綜上爲JQuery中ajax的操做，感受使用多了，和form表單的處理仍是很是類似的，只不過實現的功能不同罷了。

 

 

 

源自http://blog.csdn.net/qq_36859415/article/details/53766880