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: "个人介绍一下吧"}
                }
            }) 
  • 相关阅读:
    数据科学家成长指南(下)
    数据科学家成长指南(中)
    数据科学家成长指南(上)
    数据分析的职业规划
    2018的内容写作方向
    乱码 设置编码
    CI 如何获取get请求过来的数据
    ci 打印出常用的变量
    CI $_GET
    获取checkbox 组成字符串
  • 原文地址:https://www.cnblogs.com/tizi/p/8732711.html
Copyright © 2011-2022 走看看