zoukankan      html  css  js  c++  java
  • 基于json字符串的前后端交互:表单序列化成json字符串,解决checkbox覆盖前一个值的问题

    /** 表单序列化成json字符串的方法 */
    function form2JsonString(formId) {
    //获取准备提交后台的表单域数组Array(size) [ { name: "uname", value: "12312" }, {…}, {name: "fav", value: "2"}, {name: "fav", value: "2"} ]
    var paramArray = $('#' + formId).serializeArray();
    /*请求参数转json对象*/
    var jsonObj={};
    //复选框数组
    var arr=[];
    //$("#loginForm input[type=checkbox]").attr("name")返回第一个复选框的name值
    console.log( $("#"+formId+" input[type=checkbox]").attr("name"));
    //遍历该checkbox
    $("#"+formId+" input[type=checkbox]").each(function(){
    //判断该复选框是否被选中
    if($(this).prop("checked")){
    //把该复选框的属性value的值放入arr数组
    arr.push(this.value);
    }
    });
    //遍历表单域数组
    $(paramArray).each(function(){
    //判断该数组元素是否为复选框
    if(this.name==$("#"+formId+" input[type=checkbox]").attr("name")){
    //遇到复选框把arr数组给他,多次赋值同一个this.name会覆盖前一个
    jsonObj[this.name]=arr;
    }else{
    //其他元素直接把属性value的值给他
    jsonObj[this.name]=this.value;
    }

    });
    console.log(paramArray);
    console.log(jsonObj);
    // json对象再转换成json字符串
    return JSON.stringify(jsonObj);
    }

    $.ajax({
    url: "/ssm-easyui/findUser",
    type:'post',
    contentType:'application/json',
    data:form2JsonString('loginForm'),
    success: function(result){
    console.info(result);
    }
    });

    <div id="loginAndRegisterDialog" style="400px;height:400px;">
    <form id="loginForm" action="" method="post">
    <div>
    用户名:<input id="uanme" name="uname" />
    <br/>
    &nbsp;&nbsp;&nbsp;密码:<input id="pwd" name="pwd"/>
    <br/>
    <input type="checkbox" name="fav" id="fav1" value="1" />打篮球
    <input type="checkbox" name="fav" id="fav2" value="2" />踢足球
    <input type="checkbox" name="fav" id="fav3" value="3" />打乒乓球
    </div>
    </form>
    </div>
    后端采用SpringMVC接收:
    ————————————————

    @Controller
    public class MyController {
    @RequestMapping("findUser")
    public String findUser(@RequestBody User user){

    System.out.println("MenuController.findUser() fav:"+user);

    return "success";
    }
    }

  • 相关阅读:
    沈询:事务与分布式事务原理与实现
    c++ 幕客网
    Meet Dgraph — an open source, scalable, distributed, highly available and fast graph databas
    开发与系统管理----开发工具 左蓝
    奇虎360技术博客
    java 相关软件使用趋势
    长亭技术专栏 安全攻防技术分享
    tcp/ip RFC
    gentoo and arclinux
    孙鑫视频VC++深入详解学习笔记
  • 原文地址:https://www.cnblogs.com/zhyp/p/12980691.html
Copyright © 2011-2022 走看看