详解ajax的data参数错误导致页面崩溃


Posted in Javascript onApril 30, 2018

今天准备把选定表格的其中一行的数据通过ajax传给后端,但是网站确崩溃了。

代码如下:

$('.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
      },//前台传给后台的参数
      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),表单是数据来源于点击,然后修改表格
的内容点击确定按钮($('#ok'))后把表单数据覆盖掉之前点击行的数据,达到修改表格的目的,点击确定时触发ajax,
把修改后的数据发送给后端,拿到数据并更新数据库。

结果页面不报错,而是直接崩溃了,查看了许久,才发现是由于ajax的data参数写错了,之前写成这样:

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
      },//前台传给后台的参数
      dataType: "json",
      ansync: true,
      ContentType: "application/json; charset=utf-8",
      success: function (msg) {//msg:返回值
        a=2;
        console.log(a);
      }
    });
    edit.style.display='none';
  });

从上面可以看出,我传给data的数据并不是字符串之类的,而是一个n.fn.init [td, prevObject: n.fn.init(1), context: document],
由于自己的粗心和对导致ajax出现错误的情况了解比较少,导致看了很久的代码才发现原因,刚开始就以为不会是参数导致,
因为认为参数错误顶多拿到的数据不对,报下错或者结果不一样,果真自己还是太年轻。

Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
jquery获取tagName再进行判断
May 29 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
详解Bootstrap按钮
Jan 04 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 #Javascript
JS实现的缓冲运动效果示例
Apr 30 #Javascript
Vue波纹按钮组件制作
Apr 30 #Javascript
学习JS中的DOM节点以及操作
Apr 30 #Javascript
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
在vscode里使用.vue代码模板的方法
Apr 28 #Javascript
You might like
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
什么是Python变量作用域
2020/06/03 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
医药大学生求职简历的自我评价
2013/10/17 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
2022微信温控新功能上线
2022/05/09 数码科技