Jquery将表单数据序列化为json字符串

/**
  * 将Json数组转为Json字符串,即将$("#form-test").serializeArray()的内容转为json字符串
  * @param formArray即 $("#form-test").serializeArray(),为json数组
  * @returns {string} json字符串
  */
 function formToJson(formArray){
     var formObject = {};
     formArray.forEach(function (item) {
         formObject[item.name] = item.value;
     });
     return JSON.stringify(formObject);
 }

serialize()和serializeArray()的区别:

serialize(): 将表单数据序列化为字符串,使用&连接,即key=value&key2=value2
如:id=1&name=zhangsan&money=123

serializeArray():将表单数据序列化为对象数组。如:
(3) [{…}, {…}, {…}]
0: {name: “id”, value: “1”}
1: {name: “name”, value: “zhangsan”}
2: {name: “money”, value: “123”}


例子:

<form id="form-test">
    id:<input type="text" name="id" placeholder="请输入id"><br>
    账户名:<input type="text" name="name" placeholder="请输入用户名"><br>&emsp;额:<input type="password" name="money" placeholder="请输入密码"><br>
    <input type="button" value="提交" id="sub"><br>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script>
    $(function () {
        //不能序列化文件,而使用FormData可以
        $("#sub").click(function () {
            $.post({
               url:'ajax/testAjax',
               contentType:'application/json;charset=UTF-8',
               data:formToJson($("#form-test").serializeArray()),
               dataType:'json',
               type:'post',
               success:function (data) {
                   console.log(data);
               }
           });
        });
    });
</script>
@Controller
@RequestMapping("/ajax")
public class AjaxController {

    /**
     * 接受前端的json字符串,由springMVC帮我们转为对象
     * 并响应json串给前端
     * @param account
     * @return
     */
    @RequestMapping(value = "/testAjax",method = RequestMethod.POST)
    public @ResponseBody Account ajax(@RequestBody Account account){
        System.out.println(account);
        account.setName("李四");
        account.setMoney(2000);
        //返回对象,springMvc将javaBean转为json串,传递给前端
        return account;
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值