快速获取表单多条数据,使用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: "个人介绍一下吧"}
            }
        }) 
      

原文地址:https://www.cnblogs.com/tizi/p/8732711.html

时间: 2024-10-07 23:32:54

快速获取表单多条数据,使用ajax传递给后台的相关文章

获取表单提交的数据getParameter()方法

请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的name信息 示列: HTML代码 <input type="text" name="userName"> Jsp代码 Sring userName=equest.getParameter("userName"); request 存储的数

springmvc后台获取表单提交的数据——@ModelAttribute等方式

1.通过注解ModelAttribute直接映射表单中的参数到POJO.在from中的action写提交的路径,在input的name写参数的名称. package com.demo.model; public class user { private String username; private String password; private int nsex; public String getUsername() { return username; } public void se

(五)springmvc之获取表单提交的数据

8.1:使用Request <form method="post" id="form1" action="<%=request.getContextPath()%>/formData/formData_1"> <input type="text" name="username" value="用户名"/> <input type="ch

jQuery通过AJAX快速提交表单数据

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据. 请看下面的表单: <form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr>

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

怎么获取表单数据

import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpS

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

在Action中获取表单提交数据

-----------------siwuxie095 在 Action 中获取表单提交数据 1.之前的 Web 阶段是提交表单到 Servlet,在其中使用 Request 对象 的方法获取数据 2.Struts2 是提交表单到 Action,但 Action 没有 Request 对象,不能 直接使用 Request 对象获取数据 「可以间接使用 Request 对象获取数据」 3.Action 获取表单提交数据主要有三种方式: (1)使用 ActionContext 类 (2)使用 Ser

struts2入门之action获取表单提交数据

action获取表单提交数据,有三种方式: 1.根据ActionContext对象获取: 2.利用ServletActionContext类获取表单数据:(其实就是可以获取HttpServletRequest对象) 3.利用接口注入的方式获取表单数据:实现接口(ServletRequestAware) 其实以上三种方式都是action通过操作域对象来获取数据,和servlet中操作域对象有异曲同工之妙, I.通过ActionContext类获取表单提交数据,代码如下: 1 public clas