专栏首页光变SpringMVC 异步提交表单数据

SpringMVC 异步提交表单数据

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java中关于i=i++的问题解些

    JVM在方法体中的操作指令,一部分是直接作用stack栈,也有一些部分是直接操作Local Variable(本地变量区/局部变量区)。

    白凡
  • 成功项目管理的七条原则和三十个秘诀

    美国著名软件工程专家勃姆(B.W.Boehm)在总结软件工程准则和信条的基础上,于1983年提出软件…

    白凡
  • Javac命令使用ct.sym文件约束可使用的类

    在JDK6,升级为JDK7或者JDK8的过程中会遇到一些奇怪的问题,简单的介绍一下经典的ClassNotFound:sun.nio.*、com.sun.imag...

    白凡
  • Spring系列 SpringMVC的请求与数据响应

    y以下案例均部署在Tomcat上,使用浏览器来访问一个简单的success.jsp页面来实现

    一只胡说八道的猴子
  • springMVC笔记二

    步二:导入springioc,springweb和springmvc相关的jar包

    HUC思梦
  • javascript 浅拷贝与深拷贝

    深拷贝就是在拷贝数据的时候,将数据的所有引用结构都拷贝一份。简单的说就是,在内存中存在两个数据结构完全相同又相互独立的数据,将引用型类型进行复制,而不是只复制其...

    yangdongnan
  • Spring 框架学习 (八) Spring MVC 的控制器

    当你要处理请求映射时需要使用 @RequestMapping 注解。@RequestMapping 注解不仅可以放在函数前 也可以放在类前。

    求和小熊猫
  • 前端基础-HTML基础(四)

    frameset标签frame标签表单标签input标签select标签textarea标签通用属性参考

    efonfighting
  • 浪潮存储:以全栈能力驱动存储平台战略

    用一个极致容量、极致性能、极简架构和极易管理的存储平台去支撑起一个新数据中心,这是浪潮存储的目标,也即今年3月浪潮存储宣布的存储平台化战略。

    大数据在线
  • (04)Struts2_helloWorld

    qubianzhong

扫码关注云+社区

领取腾讯云代金券