码迷,mamicode.com
首页 > 编程语言 > 详细

ajax传递数组、form表单提交对象数组

时间:2017-01-21 22:19:14      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:bsp   任务   rup   今天   表单   method   for   ext   set   

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题。不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结。今天又遇到需要向后台传递数组,便一并写下来吧。

1、ajax传递普通数组
前台代码

 

var deleteNum= [];//定义要传递的数组
deleteNum.push("1");
deleteNum.push("2");
deleteNum.push("3");//向数组中添加元素

$.ajax({
    type:"post",
    url:"deleteNum.do",
    data:{deleteNum:deleteNum},
    traditional: true,//必须指定为true
    success:function(data){
        if(data.success){
            deleteNum = [];
        }
    }
});

 后台代码

public ActionResult deleteNum(String[] deleteNum){
    
    //这个时候已经得到了deleteNum数组值
    return Json(new {status=1});
}

 form表单提交自定义对象数组

<form id="form" name="form"  method="post">
  <table>
    <tr>
      <td><input type="text" name="user[0].name"/></td>
      <td><input type="text" name="user[0].password"/></td>
    </tr>
    <tr>
      <td><input type="text" name="user[1].name"/></td>
      <td><input type="text" name="user[1].password"/></td>
    </tr>
    <tr>
      <td><input type="text" name="user[2].name"/></td>
      <td><input type="text" name="user[2].password"/></td>
    </tr>
  </table>
</form>

 之后在form表单提交给后台时,需要先定义一个对象,当然,别忘了定义User对象,属性为name,password,重点是下面这个用于接收form表单提交的对象数组,如果还有其他对象数组需要接收,那在这个类里面再定义相应的ArrayList属性即可。

/**
 * 类型描述
 * 表单列表对象 用于接收form表单提交的对象数组
 * @since  2016-2-25
 * @author 古时一轮月
 *
 */
public class FormListObject {
    private ArrayList<User> userlist;
    public ArrayList<User> getUserlist() {
        return userlist;
    }
    public void setUserlist(ArrayList<User> userlist) {
        this.userlist= userlist;
    }
}

定义好该对象之后,在controller层接收就可以了

public AjaxResult saveOrUpdateUser(FormListObject list){
    List<User> userlist = list.getUserlist(); //你会看到你想要的
}

 转自:http://blog.csdn.net/u014252157/article/details/50751302

ajax传递数组、form表单提交对象数组

标签:bsp   任务   rup   今天   表单   method   for   ext   set   

原文地址:http://www.cnblogs.com/yunspider/p/6337872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!