详解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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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巧获服务器端信息
2006/12/06 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php 过滤器实现代码
2010/08/09 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
如何理解Python中包的引入
2020/05/29 Python
Python celery原理及运行流程解析
2020/06/13 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Ajax的工作原理
2015/12/04 面试题
幼儿园教师备课制度
2014/01/12 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
党小组推荐意见
2015/06/02 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
python字典的元素访问实例详解
2021/07/21 Python
python中if和elif的区别介绍
2021/11/07 Python