React基于FromData+Ajax的表单提交

1.定义表单内容，代码如下

<Form id="userForm" enctype="multipart/form-data">    //通过该id="userForm"  ，可定位到该表单                            <FormItem ><Input  name="userName"/></FormItem> //用户名  必须定义name，后台要通过name解析该表单的具体内容<FormItem ><Input  name="userAge"/></FormItem>   //用户年龄<FormItem ><Input type="file" name="information"/></FormItem>   //上传个人信息文件                                                                           <FormItem  ><Button style={buttoncolor} onClick={this.Add.bind(this)}>提交</Button> </FormItem>                                                                                 </Form>

2.提交按钮执行事件：通过FromData+Ajax 提交（post）数据

Add = () => {    var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象    $.ajax({      url: '/add',   //网络请求url地址      type: 'POST',      data: formData, //表单数据      cache: false,      contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件      processData: false,      success: function (data) {        console.log('成功');      }.bind(this),      error: function (xhr, status, err) {      }.bind(this)    });  }

• data：发送到服务器上的数据
• cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。 上传文件不需要缓存所以此处为false
• contentType: 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"（不能用于文件上传），提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。该默认值适合大多数应用场合。multipart/form-data：可以上传文件；application/json：告诉服务端消息主体是序列化后的 JSON 字符串

• processData: 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"（不能用于文件上传）。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。而现在我们发送的是formData对象数据，不需要再做处理，所以设置为false

3.formData对象

• 通过FormData对象可以组装一组用xmlhttprequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit方法传输的数据格式相同
• 创建一个FormData对象，然后通过调用它的append方法添加字段：

var formData = new FormData();formData.append("username", "小明");formData.append("userage", 12);