专栏首页光变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 条评论
登录 后参与评论

相关文章

  • jQuery EasyUI 详解

    easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

    老马
  • jQuery的ajax详解

    jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。

    老马
  • 【流行】现在前端流行的技术是哪几种?

    其实从根本上来讲,前端开发过去、现在、将来,至少在可能预见的将来,有且只有三种技术,就是html、css、js,其它的都是围绕着这三种技术在打转。

    web前端教室
  • 灯箱效果插件Magnific Popup详解

    Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用。

    老马
  • 爬虫大神,又出新招

    几乎所有玩爬虫的人,一定会用requests库,这个库的作者是大名鼎鼎的Kenneth Reitz 。牛逼的一塌糊涂,最近我浏览它的网站,发现他又出新招,一个把...

    IT派
  • 已经有vueJs和ReactJs了,jQuery还需要学习吗?

    先说结论啊,从我的教学经历和效果反馈来看,零基础新人学习web前端开发,还是需要学习jQuery的。

    web前端教室
  • 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。

    张果
  • backbone 整体架构学习

        构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,View是视图

    用户1148399
  • JavaScript学习总结(五)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非...

    张果
  • [译]图解React

    React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了?对于它们究竟是什么你是否感到困惑?

    用户1687375

扫码关注云+社区

领取腾讯云代金券