详解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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jQuery.each()用法分享
Jul 31 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
Validform表单验证总结篇
Oct 31 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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将进程作为守护进程的方法
2015/03/19 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Prototype Class对象学习
2009/07/19 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python实现自动解数独小程序
2019/01/21 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python3正则模块re的使用方法详解
2020/02/11 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
一年级数学教学反思
2014/02/01 职场文书
医院保洁服务方案
2014/06/11 职场文书
奥林匹克的口号
2014/06/13 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Ajax实现三级联动效果
2021/10/05 Javascript