详解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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
使用js 设置url参数
Jul 08 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python编写分类决策树的代码
2017/12/21 Python
python实现京东秒杀功能
2018/07/30 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
logging level级别介绍
2020/02/21 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python爬取代理ip的示例
2020/12/18 Python
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
风险评估实施方案
2014/03/09 职场文书
车间主任岗位职责范本
2015/04/08 职场文书