jquery ajax請求參數和返回數據的處理

2bdenny 發布于2019-08-19 17:40 / 1568人閱讀

摘要：處理返回數據，渲染到頁面上去。之前的做法也是和上面一模一樣的吧，返回的數據是數據格式的，然后分別取值賦值給頁面元素，所以代碼往往是這樣的。如果有什么更好的方案，請指教，謝謝另外摘記一個表單輸入框中回車自動提交的情況和處理方案

剛接觸學會用jQuery ajax的時候，覺得真東西好神奇，這樣就可以把數據取回來了啊。然后我可以把取回來的數據渲染到頁面上，一顆賽艇。
之前很早接觸到項目，并不知道怎么優雅的去用jquery ajax（現在也不優雅）；
那個時候看別人寫的代碼
有

$.post("","",...)

也有

$.get("","",...)

還有

$.ajax()

當然現在知道點，這些寫法都是一個意思，還是習慣用$.ajax()寫寫吧。
之前的數據處理，發送數據請求(json的數據格式)，然后自己通過下面的方式

var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
//...

當時表單發送的參數項少，所以沒覺得什么，到后來一個表單很多項數，也這么寫，結果request就手工寫了好多行，雖然能用吧，但是看看這樣的代碼就覺著哪里不對勁吧，至少很不“優雅”。
后來，發現其實jquery有個serialize的方法可以序列化表單數據，可以省事很多。
w3c_jquery_serialize-demo

處理返回數據，渲染到頁面上去。
之前的做法也是和上面一模一樣的吧，返回的數據是json數據格式的，然后分別取值賦值給頁面元素，所以代碼往往是這樣的。

如果數據再多點，真的是感覺略難看。其實應該是有更好的做法的，返回的是一個json對象，所以我們可以通過遍歷對象的屬性值取到所有值然后依次渲染到頁面對應元素即可。
對象遍歷可以用for-in來寫（有更好的方法來寫么？）

$.ajax({
    //...
    success:function(result){
        for(var v in result){
            // 如果渲染的元素都是統一的輸入框形式的話，
            $("form").find("input[name="+ v +"]").val(result[v]); 

            // 如果有其他元素 則另外多帶帶校驗處理
        }
    }

})

上面name(或者其他tag在頁面中先寫好，和返回數據的屬性一致)。

如果有什么更好的方案，請指教，謝謝！
另外摘記一個表單輸入框中回車自動提交的情況和處理方案

云服務器 GPU云服務器請求參數返回數據成功 ajax返回參數 ajax請求返回list js請求和返回數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78749.html

ajax如何處理服務器返回的3種數據格式

摘要：如果不指定，將自動根據包信息返回或，并作為回調函數參數傳遞。調用本次請求時傳遞的參數要求為類型的參數，請求完成后調用的回調函數請求成功或失敗時均調用。由服務器返回，并根據參數進行處理后的數據。這篇東西本身是非常基礎的，但是經常在處理ajax返回值的時候還是會犯各種小錯誤，所以就想到把這些方法結合以前寫過的代碼片段整理一下，方便以后復習和使用。另外呢，雖然能搜到很多類似的文檔，但是整理...

Lin_R 2019-08-20 16:35 評論0 收藏0
Ajax詳解

摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客...

jokester 2019-08-23 14:15 評論0 收藏0
jquery ajax 方法封裝說明

摘要：簡要說明前面我寫了一篇方法封裝及文件設計文檔，主要用來說明我們在項目中通常會對的方法進行進一步的封裝處理，便于我們在業務代碼中使用。這篇文檔我們主要對封裝的方法進行一個簡要說明。簡要說明前面我寫了一篇《jquery ajax 方法封裝及 api 文件設計》文檔，主要用來說明我們在項目中通常會對 jquery 的 ajax 方法進行進一步的封裝處理，便于我們在業務代碼中使用。從那篇文...

z2xy 2019-08-23 16:26 評論0 收藏0
原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
jQuery Ajax應用與常用插件

jQuery 實現Ajax應用使用load()方法異步請求數據使用load()方法通過Ajax請求加載服務器中的數據，并把返回的數據放置到指定的元素中，它的調用格式為： load(url,[data],[callback]) 參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數使用getJSON()方法異步加載JSON格式數...

bingchen 2019-08-21 12:00 評論0 收藏0