SpringMVC 异步提交表单数据

白凡

发布于 2018-08-07 17:05:53

1.4K0

发布于 2018-08-07 17:05:53

文章被收录于专栏：光变光变

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

异步Get

Spring配置

<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

<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

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

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

Java页面对象信息

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配置

<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

<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

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

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

Java页面对象信息

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配置

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

前端HTML表单信息

<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信息

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

@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 页面对象信息

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 + '\'' +
          '}';
  }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-08-29，如有侵权请联系 cloudcommunity@tencent.com 删除

spring