• 快速获取表单多条数据,使用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: "个人介绍一下吧"}
                }
            }) 
  • 相关阅读:
    ArcEngine:GP使用!没道理的错误!
    XMLHttpRequest的亲密接触(1)——简单讲解
    XMLHttpRequest的亲密接触(2.2)——表单提交
    初入Ajax,需要明确的Web工作原理
    文章收藏明细
    【备忘】Oracle10g 创建、删除表空间、创建、授权用户
    proxool的使用总结
    Java操作压缩与解压缩
    解决jquery ui dialog中调用datepicker时日期选择控件被遮挡的问题
    如何读取jar包中的xml等资源文件
  • 原文地址:https://www.cnblogs.com/tizi/p/8732711.html
Copyright © 2020-2023  润新知