zoukankan      html  css  js  c++  java
  • 快速获取表单多条数据,使用ajax传递给后台

    当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的serialize()方法获取。

    HTML:

    <form id="form">
            <table>
                <tr>
                    <td>姓名</td>
                    <td>
                        <input type="text" name="name" value="张三" />
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="male" checked /><input type="radio" name="sex" value="female" /></td>
                </tr>
                <tr>
                    <td>地区</td>
                    <td>
                        <select name="area">
                            <option value="heping" selected>和平区</option>
                            <option value="nankai">南开区</option>
                            <option value="xiqing">西青区</option>
                            <option value="hexi">河西区</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="hobby[]" value="movie" checked />电影
                        <input type="checkbox" name="hobby[]" value="music" checked/>音乐
                        <input type="checkbox" name="hobby[]" value="basketball" />篮球
                    </td>
                </tr>
                <tr>
                    <td>个人介绍</td>
                    <td>
                        <textarea name="intro">个人介绍一下吧</textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="提交" id="submit" />
                    </td>
                </tr>
            </table>
    </form>

    Javascript:

    $(function(){
                    $("#submit").click(function(){
                    var form=$("#form");
                    var data=getFormData(form);
                    $.ajax({
    
                //注意测试一下传输的data数据是js对象还是json对象格式
                    })
                })
                // 获取表单数据
                function getFormData(form){
                    var data=form.serialize();
                    data=decodeURI(data);
                    //name=张三&sex=male&area=heping&hobby[]=movie&hobby[]=music&intro=个人介绍一下吧
                    var arr=data.split("&");
                    //["name=张三", "sex=male", "area=heping", "hobby[]=movie", "hobby[]=music", "intro=个人介绍一下吧"]
                    var item,key,value,newData={};
                    for(var i=0;i<arr.length;i++){
                        item=arr[i].split("=");
                        key=item[0];
                        value=item[1];
                        if(key.indexOf("[]")!=-1){
                            key=key.replace("[]","");
                            if(!newData[key]){
                                newData[key]=[];
                            }
                            newData[key].push(value);
                        }else{
                            newData[key]=value;
                        }
                    }
                    return newData;
                    //{name: "张三", sex: "male", area: "heping", hobby: (2) ["movie", "music"], intro: "个人介绍一下吧"}
                }
            }) 
  • 相关阅读:
    oracle 查询 主机名和对应的IP地址
    mysql 常用命令
    linux 下 mysql-5.5.8 安装
    oracle批量插入数据(测试)
    Oracle数据库查询优化(上百万级记录如何提高查询速度)
    针对分区表一个月3个分区定期清理脚本
    C语言中%p,%u,%lu都有什么用处
    MAC下查看环境变量的值的方法
    Mac 终端 Linux 命令总结(简单命令)
    TypeScript学习-TypeScript环境配置
  • 原文地址:https://www.cnblogs.com/tizi/p/8732711.html
Copyright © 2011-2022 走看看