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

在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

时间: 2024-10-03 20:11:39

ajax传递数组、form表单提交对象数组的相关文章

jqPaginator分页(ajax用法和form表单提交用法)

一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="res/bootstrap.min.css"/> </head> <body style=&quo

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

使用ajax方法实现form表单的提交

转http://www.cnblogs.com/han-1034683568/p/7199168.html 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续

javascprit form表单提交前验证以及ajax返回json

1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后返回 returning 405 Method Not Allowed 原因是我后台返回的时候没有加上: @ResponseBody注解.加上后返回的数据是json字符串,但是js只能操作json对象.需要把json字符串转为json对象.一般的有三种方式1.JSON.parse();如 var j

AJAX PHP无刷新form表单提交的简单实现(推荐)

下面小编就为大家带来一篇AJAX PHP无刷新form表单提交的简单实现(推荐).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 ajax.php <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>

form表单提交转为ajax方式提交

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法. 原先的form表单长这样: <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记 1.  模拟form表单提交数据:(get方式) <body> <formmethod="get"action="DataTest7"> <inputtype="text"name="uname"value="yang"id="myname"><br/> <inputtype="password&q

SpringBoot 以对象的形式接口form表单提交

当有需求遇到使用form表单提交的,但是参数又超级多的时候,真的是很头疼,以下的方法可以使用对象接口form表单提交的参数 一.自定义注解 @Target(ElementType.PARAMETER) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface FormBody { } 二.未完待续... 原文地址:https://www.cnblogs.com/JoeyWong/p/9732984.html

jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post(