Layui表单提交问题

骜蛟

已于 2023-05-26 13:10:49 修改

阅读量4.1k

点赞数 2

分类专栏：排错与其他文章标签： php ajax layui jquery

于 2021-01-30 17:31:35 首次发布

本文链接：https://blog.csdn.net/weixin_43538042/article/details/113441817

版权

排错与其他专栏收录该内容

11 篇文章 0 订阅

订阅专栏

踩过的坑

1、Layui的form表单提交问题

在提交表单数据时，提交按钮为 submit 类型，以layui为js框架时，会重复提交表单数据。如何解觉这一问题？以下给出我认为便捷的三种方法：

设置button的type=button，否则默认submit，就会重复提交

在监听提交的form.on里加上return flase

form.on("submit(formDemo)",function(data){
  	//do something
  	return false; 
 });

把button移出form表单

2、JQuery的ajax中data提交方式

在提交表单数据时，data通常使用键值对的方式提交数据。如

form.on('submit(formDemo)', function(data){
  $.ajax({
   	//...
    data:{
      uid:data.field.uid,
      password:data.field.password,
    },
  	//...
  });
  return false; //防止表单的重复提交
});

但是如果遇到大量键值对，这样的方式不免繁琐。在此百度之后，总结出两种便捷提交方式：

直接传data.field

form.on('submit(formDemo)', function(data){
  $.ajax({
   	//...
    data:data.field,
  	//...
  });
  return false; //防止表单的重复提交
});

利用formdata对象

form.on('submit(formDemo)', function(data){
  var fd = new FormData(document.querySelector("form"));
  $.ajax({
   	//...
    data:fd,
    processData: false, //重要
    contentType: false, //重要
  	//...
  });
  return false; //防止表单的重复提交
});

后端接收数据

 $data=Request::post(); //['key'=>'value',...]多个键值对的形式

至于为什么要加 processData: false和contentType: false, 这里给出查到的解释：

对于contentType参数，发起http请求时设置的请求头中的contentType。jQuery.ajax()默认的值为：'application/x-www-form-urlencoded; charset=UTF-8'，这个在大多数情况下都是适用的。

但经过测试，保持默认时会报错，因为发送的数据中有input type=“file”(上传文件)，那么这时contentType应该设置为’multipart/form-data’，但如果指定为这个类型服务端（php）就会报这个错误： Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具体原因现在还不清楚，所以这里先将contentType设置为false，即不让jQuery设置contentType。
processData参数，根据jQuery.ajax()文档中的解释，默认情况下，jQuery会处理发送的数据，将数据按照'application/x-www-form-urlencoded'的要求转换为查询字符串，如果要发送的数据是DOMDocument或者不需要处理，就可以设置为false不让jQuery转换数据，我们这里要发送的数据其实就是DOMDocument。

经过测试，如果保持默认(true)的话，在发起请求前js会报错： TypeError: ‘append’ called on an object that does not implement interface FormData.

另外还有个dataType参数，期望从服务器中返回的数据格式，这里最好也不要指定，而是让jquery自己根据http响应头中的contentType判断，然后返回一个合适的数据类型。指定后不会影响后台程序的逻辑处理，但你在前端接收的数据很可能不是期望的数据，于是js就会报这一类错误： SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ，这个是将dataType指定为json后报的错误。

原文链接