詳解ajax的data參數(shù)錯誤導致頁面崩潰
今天準備把選定表格的其中一行的數(shù)據(jù)通過ajax傳給后端,但是網(wǎng)站確崩潰了。
代碼如下:
$('.icon-edit').click(function (event) { 這是一個按鈕 o=$('.icon-edit').index($(this))+1; edit.style.display='block'; //console.log('$(this)',$(this).parent().parent()); let message=$(this).parent().parent(); $("#non").val(message.children('td:eq(0)').html()); $("#name").val(message.children('td:eq(1)').html()); $("#sex").val(message.children('td:eq(2)').html()); $("#age").val(message.children('td:eq(3)').html()); $("#xueyuan").val(message.children('td:eq(4)').html()); $("#grade").val(message.children('td:eq(5)').html()); $("#phone").val(message.children('td:eq(6)').html()); $("#room").val(message.children('td:eq(7)').html()); l=message.children('td:eq(0)').html(); }); $('#ok').click(function () { //event.stopImmediatePropagation(); let text=$('table'); id=$('#non').val(); username=$('#name').val(); sex=$('#sex').val(); age=$('#age').val(); institute=$('#xueyuan').val(); grade=$('#grade').val(); phone=$('#phone').val(); hlbhl=$('#room').val() text.find("tr:eq("+o+")").children('td:eq(0)').text(id); text.find("tr:eq("+o+")").children('td:eq(1)').text(username); text.find("tr:eq("+o+")").children('td:eq(2)').text(sex); text.find("tr:eq("+o+")").children('td:eq(3)').text(age); text.find("tr:eq("+o+")").children('td:eq(4)').text(institute); text.find("tr:eq("+o+")").children('td:eq(5)').text(grade); text.find("tr:eq("+o+")").children('td:eq(6)').text(phone); text.find("tr:eq("+o+")").children('td:eq(7)').text(hlbhl); $.ajax({ type: "POST", url: "doAction2.php",//請求的后臺地址 data: { non:o, id: id, username: username, sex: sex, age: age, institute: institute, grade: grade, phone: phone, hlbhl: hlbhl },//前臺傳給后臺的參數(shù) dataType: "json", ansync: true, ContentType: "application/json; charset=utf-8", success: function (msg) {//msg:返回值 a=2; console.log(a); } }); edit.style.display='none'; });
代碼的大意是我點擊一個按鈕($('.icon-edit'))然后彈出一個表單(edit),表單是數(shù)據(jù)來源于點擊,然后修改表格
的內(nèi)容點擊確定按鈕($('#ok'))后把表單數(shù)據(jù)覆蓋掉之前點擊行的數(shù)據(jù),達到修改表格的目的,點擊確定時觸發(fā)ajax,
把修改后的數(shù)據(jù)發(fā)送給后端,拿到數(shù)據(jù)并更新數(shù)據(jù)庫。
結(jié)果頁面不報錯,而是直接崩潰了,查看了許久,才發(fā)現(xiàn)是由于ajax的data參數(shù)寫錯了,之前寫成這樣:
id=text.find("tr:eq("+o+")").children('td:eq(0)').text(id); username=text.find("tr:eq("+o+")").children('td:eq(1)').text(username); sex=text.find("tr:eq("+o+")").children('td:eq(2)').text(sex); age=text.find("tr:eq("+o+")").children('td:eq(3)').text(age); institute=text.find("tr:eq("+o+")").children('td:eq(4)').text(institute); grade=text.find("tr:eq("+o+")").children('td:eq(5)').text(grade); phone=text.find("tr:eq("+o+")").children('td:eq(6)').text(phone); hlbhl=text.find("tr:eq("+o+")").children('td:eq(7)').text(hlbhl); $.ajax({ type: "POST", url: "doAction2.php",//請求的后臺地址 data: { non:o, id: id, username: username, sex: sex, age: age, institute: institute, grade: grade, phone: phone, hlbhl: hlbhl },//前臺傳給后臺的參數(shù) dataType: "json", ansync: true, ContentType: "application/json; charset=utf-8", success: function (msg) {//msg:返回值 a=2; console.log(a); } }); edit.style.display='none'; });
從上面可以看出,我傳給data的數(shù)據(jù)并不是字符串之類的,而是一個n.fn.init [td, prevObject: n.fn.init(1), context: document],
由于自己的粗心和對導致ajax出現(xiàn)錯誤的情況了解比較少,導致看了很久的代碼才發(fā)現(xiàn)原因,剛開始就以為不會是參數(shù)導致,
因為認為參數(shù)錯誤頂多拿到的數(shù)據(jù)不對,報下錯或者結(jié)果不一樣,果真自己還是太年輕。
- 快速解決ajax請求出錯狀態(tài)碼為0的問題
- PHP 中使用ajax時一些常見錯誤總結(jié)整理
- 完美解決ajax跨域請求下parsererror的錯誤
- ajax跨域訪問報錯501的解決方法
- jQuery中ajax錯誤調(diào)試分析
- Ajax向后臺傳json格式的數(shù)據(jù)出現(xiàn)415錯誤的原因分析及解決方法
- Ajax犯的錯誤處理方法
- js ajaxfileupload.js上傳報錯的解決方法
- 解決ajax返回驗證的時候總是彈出error錯誤的方法
- Jquery Ajax Error 調(diào)試錯誤的技巧
- django使用ajax post數(shù)據(jù)出現(xiàn)403錯誤如何解決
- Ajax報錯400的參考解決辦法
相關文章
js之ActiveX控件使用說明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動畫內(nèi)容等來增加瀏覽的樂趣。不過,這些程序可能出問題或者向您提供不需要的內(nèi)容2014-03-03jquery slibings選取同級其他元素的實現(xiàn)代碼
jquery選取同級其他元素可以使用slibings方法,end方法可以清除之前的鏈式操作,相當于重新開始2013-11-11基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫
這篇文章主要介紹了基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫的相關資料,焦點圖中的圖片利用了CSS3的相關特性實現(xiàn)圖片傾斜效果,從而讓圖片出現(xiàn)3D的視覺效果,感興趣的小伙伴們可以參考一下2016-03-03用jQuery.ajaxSetup實現(xiàn)對請求和響應數(shù)據(jù)的過濾
本文主要對用jQuery.ajaxSetup實現(xiàn)對請求和響應數(shù)據(jù)的過濾的過程與方法進行詳細全面的實例講解。具有很好的參考價值,需要的朋友一起來看下吧2016-12-12jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果,如何實現(xiàn)上拉刷新下拉加載更多頁面的呢?下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理,需要的朋友可以參考下2015-08-08