1. 程式人生 > >快速獲取表單多條數據,使用ajax傳遞給後臺

快速獲取表單多條數據,使用ajax傳遞給後臺

style script 姓名 ket 對象格式 put var AD button

當表單中有多條數據需要向後臺傳遞時,一個一個的獲取顯然是不可取的辦法,可以借助表單的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: "個人介紹一下吧"}
            }
        }) 

      

快速獲取表單多條數據,使用ajax傳遞給後臺