详解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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
实例讲解PHP表单处理
2019/02/15 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python优先队列实现方法示例
2017/09/21 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
小学生感恩老师演讲稿
2014/08/28 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Linux中sftp常用命令整理
2022/06/28 Servers