提交json表单给Java 表单提交json数据

表单提交可使用action直接提交给controller直接使用@ModelAttribute（也可不写）直接注入进pojo，可是如果需要对表单数据进行简单的预处理就需要使用js

jsp  form提交给本页面，提交按键type=button  这样点击提交的时候不会直接提交

<form action="#" method="post" onsubmit="return false" id="user_register">
                    <div class="input_black">
                        <ul class="ul1">
                            <li>姓名</li>
                            <li>电话</li>
                            <li>邮箱</li>
                            <li>身份证号</li>
                            <li>密码</li>
                            <li>确认密码</li>
                        </ul>
                        <ul class="ul2">
                            <li><input type="text" name="username"></li>
                            <li><input type="text" name="usertel"></li>
                            <li><input type="text" name="usermail"></li>
                            <li><input type="text" name="idnum"></li>
                            <li><input type="password" name="password" id="password"></li>
                            <li><input type="password" name="password_r" id="password_r"></li>
                        </ul>
                    </div>
                    <input type="button" value="提交" id="input_sub" class="input" onclick="userregister()" >
                    <input type="reset" value="取消" id="input_res" class="input">
                </form>

js 这里简单实现验证两次输入密码是否相同。使用FormData对象可以快捷的获取表单数据，不过它的提交方式是以文件流的形式如果用到需要后台配置文件上传下载（不过本例只是用它封装，用json上传）。验证后将formdata转换成json对象，然后使用JSON.stringify(jsondata)转换为json字符串。

注：ajax请求中  contentType: "application/json" 必须设置不然后台会乱码

var formdata=new FormData(document.getElementById("user_register"))
   var password=formdata.get("password")
   var password_r=formdata.get("password_r")
   if(password==password_r){
      console.log("密码相同")
      formdata.delete("password_r");
      console.log(formdata.get("username"));
      var jsondata={};
      formdata.forEach((value, key) => jsondata[key] = value);
      console.log(jsondata)
      $.ajax({
         contentType: "application/json",
         type:"post",
         url:"user_register",
         data:JSON.stringify(jsondata),
         dataType:"json",
         processData: false,
         success:function (result) {
            console.log("方法执行成功！！！！")
         }
      })
   }else{
      alert("两次输入的密码不同，请重新输入")
      document.getElementById("input_res").click();
   }

java   导入fastjson依赖

<dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.1.34</version>
    </dependency>

配置springmvc支持

<mvc:annotation-driven>
          <mvc:message-converters register-defaults="true">
              <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                  <property name="supportedMediaTypes">
                      <list>
                          <value>text/html;charset=UTF-8</value>
                          <value>application/json</value>
                          <value>application/xml;charset=UTF-8</value>
                      </list>
                  </property>
                  <property name="features">
                      <list>
                          <value>WriteMapNullValue</value>
                          <value>WriteNullNumberAsZero</value>
                          <value>WriteNullListAsEmpty</value>
                          <value>WriteNullStringAsEmpty</value>
                          <value>WriteNullBooleanAsFalse</value>
                          <value>WriteDateUseDateFormat</value>
                      </list>
                  </property>
              </bean>
          </mvc:message-converters>
      </mvc:annotation-driven>

controller  需要注意 @RequestBody 只接受传上来的是json字符串， 只接受传上来的是json字符串, 只接受传上来的是json字符串,不能传json对象，所以js端要转成json字符串，之后就能使用json字符串做事情了

@RequestMapping(value = "user_register",method= RequestMethod.POST)
    @ResponseBody
    public void register_user( @RequestBody String jsondata){
        System.out.println(jsondata);
    }