Layui表单提交问题

踩过的坑

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后报的错误。

原文链接

---

3、thinkPHP文件上传

文件上传是个大坑，这点我专门写了另外一篇

4、TP6自带分页

TP6自带分页官方文档写得比较详细，用起来也较为简单，挂个链接

​美中不足的是，TP6默认采用BootStrap渲染，我们需要自己修改样式。如何修改？参考另一篇