序列化多个form表单内容同时提交

一、首先将表单主体序列化为json对象。

方法:

 //将表单序列化为json,这里加了个jQuery的扩展方法
    $.fn.serializeJson = function () {
        var result = {};
        var array = this.serializeArray();
        $(array).each(function () {
            if (result[this.name]) {
                if ($.isArray(result[this.name])) {
                    result[this.name].push(this.value);
                } else {
                    result[this.name] = [result[this.name], this.value];
                }
            } else {
                result[this.name] = this.value;
            }
        });
        return result;
    };

使用方法为:var jsonData=$("#form").serializeJson();

二、序列化form数据

f.GetFormData = function (formId, dataFailed, jsonData) {
        var array = $("#" + formId).serializeArray();
        $(array).each(function (i, o) {
            var n = o.name, v = o.value;
            jsonData[dataFailed + "." + n] = v;
        });
        return jsonData;
    }

三、序列化grid数据

 

f.GetGridData = function (gridname, datafailed, jsondata) {

        var grid = $("#" + gridname);
        var addList = grid.datagrid("getChanges");
        $.each(addList, function (i, o) {
            o.InfoGroupName = gridname;
            for (var p in o) {
                jsondata[datafailed + "[" + i + "]." + p] = addList[i][p];
            }
        });
        return jsondata;
    }

 

时间: 2024-10-10 15:19:07

序列化多个form表单内容同时提交的相关文章

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

通过button将form表单的数据提交到action层

form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: 1 <form id="handleform"> 2 <!-- 根据学生id修改学生信息 --

用form表单实现Ajax---post提交

实例讲解:新闻发布实现无刷新上传,显示 html代码: 注意:文本框中并没有id  ,,只有name.jquery获取每个文本框的值还要在拼写提交格式(id=value&name=value&...)太繁琐太麻烦!怎么提交到服务器??js中有详解 <body> <form id="form1">//表单只留个id <table> <tbody> <tr> <td>标题</td> <

使用jQuery重用form表单并异步提交到其他action

在做页面开发的时候,有时候要重用表单的数据,并异步请求提交到其他的链接中,这个时候就可以使用jquery去修改表单的action值(记得使用后修改回来),并调用submit方法,当然后台的链接action或者controller方法必须返回值类型为void,否则将发生页面跳转,返回null则显示空白页,无法实现异步调用.另外,这里可以使用另外一个方式提交,将表单序列化,然后用jQuery的ajax提交,不过要对返回的信息进行处理. 直接上代码: (1)jQuery改变form属性 $(".exp

微信小程序--获取form表单初始值提交数据

<form bindsubmit="formSubmit"> <view class="txt"> <view class="ima"></view> <view class="txt2">姓名</view> <input placeholder="请输入姓名" maxlength="10" class=&qu

HTML form表单回车触发提交

<script type="text/javascript">    function submitByEnter()    {        if(event.keyCode == 13)        {            login();            document.getElementByIdx_x("password").value="";        }    }</script><fo

form表单 的自定义提交 触发 方式

var form = document.forms[0];        form.action="/springMVC6/user/data/addUser";        form.method="post"; form.enctype="multipart/form-data"//图片上传 必须设置的属性值 form.submit();

FORM表单转AJAX提交

//将form转为AJAX提交 function ajaxSubmit(frm, fn) {     var dataPara = getFormJson(frm);     $.ajax({         url: frm.action,         type: frm.method,         data: dataPara,         success: fn     }); } //将form中的值转换为键值对. function getFormJson(frm) {