详解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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
VUE安装使用教程详解
Jun 03 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
yii分页组件用法实例分析
2015/12/28 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
深入浅析python定时杀进程
2016/06/06 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
餐饮加盟计划书
2014/01/10 职场文书
项目建议书范文
2014/05/12 职场文书
增员口号大全
2014/06/18 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers