BaiFan

本文可转载演绎，但需要注明原作者和本文链接。

By

文章目录
  1. 1. 异步Get
  2. 2. 异步POST-JSON
  3. 3. 异步POST-JSON-带文件

使用SpringMVC和JQuery，异步post提交还有文件的表单。

异步Get

Spring配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
  <property name="messageConverters">
    <list>
      <bean class="org.springframework.http.converter.StringHttpMessageConverter">
        <property name="supportedMediaTypes">
          <list>
            <value>text/html;charset=UTF-8</value>
            <value>text/plain;charset=UTF-8</value>
            <value>application/json;charset=UTF-8</value>
          </list>
        </property>
      </bean>
      <!-- 将RequestBody中的数据转换成MultiMap -->
      <bean class="org.springframework.http.converter.FormHttpMessageConverter"></bean>
      <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
    </list>
  </property>
</bean>

前端HTML

1
2
3
4
5
6
<input id="nodeId" name="nodeId" type="text" value="98765"/>
<form id="testForm">
  <input name="id" type="text" value="123456"/>
  <input name="name" type="text" value="Upload-Name"/>
  <button type="button" onclick="submitForm()">提交</button>
</form>

前端Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var refreshCount = 1;
function submitForm() {
  console.log("更新验证码:第" + refreshCount + "次");
  var formData = $("#testForm").serialize() + '&nodeId=' + $("#nodeId").val();
  $.ajax({
    url: "/test",
    type: 'GET',
    data: formData,
    dataType: 'json',
    contentType: 'application/json',
    success: function (data, status, xhr) {
      console.log("成功：" + JSON.stringify(data));
    },
    error: function (jqXHR, error, exception) {
      console.log("调用失败！")
      console.log(jqXHR);
      console.log(error);
      console.log(exception);
      console.log(JSON.stringify(exception.toString));
    },
    complete: function (jqXHR) {
      console.log("调用完成！");
    }
  });
  refreshCount = refreshCount + 1;
}

Java的RequestMapping

1
2
3
4
5
@RequestMapping(value = "/test", method = RequestMethod.GET)
@ResponseBody
public TestVo test(@ModelAttribute TestVo testVo) {
    return testVo;
}

Java页面对象信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class TestVo {
  private Integer nodeId;
  private Integer id;
  private String name;
  public Integer getNodeId() {
      return nodeId;
  }
  public void setNodeId(Integer nodeId) {
      this.nodeId = nodeId;
  }
  public Integer getId() {
      return id;
  }
  public void setId(Integer id) {
      this.id = id;
  }
  public String getName() {
      return name;
  }
  public void setName(String name) {
      this.name = name;
  }
  @Override
  public String toString() {
      return "TestVo{" +
          "nodeId=" + nodeId +
          ", id=" + id +
          ", name='" + name + '\'' +
          '}';
  }
}

异步POST-JSON

Spring配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
  <property name="messageConverters">
    <list>
      <bean class="org.springframework.http.converter.StringHttpMessageConverter">
        <property name="supportedMediaTypes">
          <list>
            <value>text/html;charset=UTF-8</value>
            <value>text/plain;charset=UTF-8</value>
            <value>application/json;charset=UTF-8</value>
          </list>
        </property>
      </bean>
      <!-- 将RequestBody中的数据转换成MultiMap -->
      <bean class="org.springframework.http.converter.FormHttpMessageConverter"></bean>
      <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
    </list>
  </property>
</bean>

前端HTML

1
2
3
4
5
6
<input id="nodeId" name="nodeId" type="text" value="98765"/>
<form id="testForm">
  <input name="id" type="text" value="123456"/>
  <input name="name" type="text" value="Upload-Name"/>
  <button type="button" onclick="submitForm()">提交</button>
</form>

前端Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var refreshCount = 1;
function submitForm() {
  console.log("更新验证码:第" + refreshCount + "次");
  var formData = {};
  var dataArray = $("#testForm").serializeArray();
  var dataSize = dataArray.length;
  for (i = 0; i < dataSize; i++) {
    formData[dataArray[i].name] = dataArray[i].value;
  }
  formData['nodeId'] = $("#nodeId").val();
  $.ajax({
    url: "/test",
    type: 'POST',
    data: JSON.stringify(formData),
    dataType: 'json',
    contentType: 'application/json',
    success: function (data, status, xhr) {
      console.log("成功：" + JSON.stringify(data));
    },
    error: function (jqXHR, error, exception) {
      console.log("调用失败！")
      console.log(jqXHR);
      console.log(error);
      console.log(exception);
      console.log(JSON.stringify(exception.toString));
    },
    complete: function (jqXHR) {
      console.log("调用完成！");
    }
  });
  refreshCount = refreshCount + 1;
}

Java的RequestMapping

1
2
3
4
5
@RequestMapping(value = "/test", method = RequestMethod.POST)
@ResponseBody
public TestVo test(@RequestBody TestVo testVo) {
    return testVo;
}

Java页面对象信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class TestVo {
  private Integer nodeId;
  private Integer id;
  private String name;
  public Integer getNodeId() {
      return nodeId;
  }
  public void setNodeId(Integer nodeId) {
      this.nodeId = nodeId;
  }
  public Integer getId() {
      return id;
  }
  public void setId(Integer id) {
      this.id = id;
  }
  public String getName() {
      return name;
  }
  public void setName(String name) {
      this.name = name;
  }
  @Override
  public String toString() {
      return "TestVo{" +
          "nodeId=" + nodeId +
          ", id=" + id +
          ", name='" + name + '\'' +
          '}';
  }
}

异步POST-JSON-带文件

Spring配置

1
2
3
4
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- setting maximum upload size -->
  <property name="maxUploadSize" value="100000"/>
</bean>

前端HTML表单信息

1
2
3
4
5
6
<form id="uploadForm">
  <input name="id" type="text" value="123456"/>
  <input name="name" type="text" value="Upload-Name"/>
  <input id="file" name="file" type="file"/>
  <button type="button" onclick="submitUpload()">提交</button>
</form>

前端JavaScirpt信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function submitUpload() {
  var formData = new FormData();
  var dataArray = $("#uploadForm").serializeArray();
  var dataSize = dataArray.length;
  for (i = 0; i < dataSize; i++) {
    formData.append(dataArray[i].name, dataArray[i].value);
  }
  formData.append('file', $('#file')[0].files[0]);
  $.ajax({
    url: '/upload',
    data: formData,
    cache: false,
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    type: 'POST',
    success: function (data) {
      console.log(data);
    }
  });
}

Java的RequestMapping

1
2
3
4
5
6
7
8
9
10
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String upload(MultipartHttpServletRequest request, @ModelAttribute TestVo testVo) {
  System.out.println(testVo);
  Iterator<String> names = request.getFileNames();
  while (names.hasNext()){
      System.out.println(names.next());
  }
  return "OK";
}

Java 页面对象信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class TestVo {
  private Integer id;
  private String name;
  public Integer getId() {
      return id;
  }
  public void setId(Integer id) {
      this.id = id;
  }
  public String getName() {
      return name;
  }
  public void setName(String name) {
      this.name = name;
  }
  @Override
  public String toString() {
      return "TestVo{" +
          "id=" + id +
          ", name='" + name + '\'' +
          '}';
  }
}

Program►Spring►Manual
JavaSpringUpload
文章目录
  1. 1. 异步Get
  2. 2. 异步POST-JSON
  3. 3. 异步POST-JSON-带文件