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";
    }
    }

  • 相关阅读:
    树莓派远程监控的实现
    frp内网渗透实现ssh外网访问家里树莓派(树莓派raspbian系统+腾讯云contos7)
    Linux下远程连接断开后如何让程序继续运行
    windows 远程连接登录树莓派桌面
    树莓派设置frpc开机启动
    树莓派 raspbian Linux 系统命令行 快捷键
    MyBatis如何防止SQL注入
    Apache POI导出excel表格
    SpringBoot文件上传
    SpringBoot整合定时任务
  • 原文地址:https://www.cnblogs.com/zhyp/p/12980691.html
Copyright © 2011-2022 走看看