javascript 一次性post页面所有指定表单数据

 利用javascript +ajax向后台响应页面post数据时，一般方式是用jquery 先获得要提交的数据，然后包装到ajax数据中；但是一旦遇到一个表单页面有很多很多的表单数据需要提交时，一个个获取然后在提交也是一种方法，但是很笨，而且重复的代码量特别多。这里提供一种简单偷懒的方式一次性提交所有指定id的表单的内容；

用javascript写一个JToos对象，这个对象包含ajax方法，和saveInfo方法，PushControlValue 方法。具体代码 JTools.js：

var JTools = {};
JTools.UI = {};

//handlerUrl 后台响应地址
//data post的数据
//执行成功函数
//失败函数
//是否异步
JTools.ajax = function (handlerUrl, data, success, fail, Isasync) {
    $.ajax(
    {
        url: handlerUrl,
        data: data,
        dataType: 'post',
        async: (null == Isasync || undefined == Isasync) ? false : Isasync,
        success: function (respondData) {
            if (undefined != success) {
                success(respondData);
            }
        },
        fail: function () {
            if (undefined != fail) {
                fail();
            }
        }
    }
    );

}
//panel div对象
//func 执行成功的函数
//ActionMethod 后台执行的方法
// data 额外指定的数据 json数据类型

 JTools.UI.SaveInfo = function (panel, func, ActionMethod, data) {
    var Panel = panel;
    var handlerUrl = Panel.attr("handlerurl");
    if (null == data || undefined == data) {
        data = {};
    }
    data["CallMethod"] = ActionMethod;
    Panel.find("[data^='Panel_']").each(function (i) {
        var self = $(this);
        var key = self.attr("data").replace("Panel_", "");
        JTools.UI.PushControlValue(key, self, data);
    });

    JTools.ajax(handlerUrl, data, func, null, null);
}

JTools.UI.PushControlValue = function (key, control, data) {
    var controltype = control.get(0).tagName;
    switch (controltype) {
        case "INPUT":
        case "SPAN":
        case "TEXTAREA":
        case "SELECT": data[key] = control.val(); break;
        case "LABEL": data[key] = control.html(); break;                 
    }
}

在需要提交的表单页面，用一个大的div，包括你所需要提交的表单，指定此div的ID,给这个div加入一个自定义的属性handlerurl，这个handlerurl就是你指定的post的后台响应页面；给需要提交到后台的标签元素添加一个自定义属性data=“Panel_标签ID”(可自由定义，保证属性名是data,内容是Panel_前缀就行了）。

然后 这样调用：

JTools.UI.SaveInfo($("#testPanel"), null, "submit",null);

详细有解释；

实例页面default.aspx：

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="UFactory._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/JTool.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        欢迎使用 ASP.NET!
    </h2>
    <p>
        若要了解关于 ASP.NET 的详细信息，请访问 <a href="http://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。
    </p>
    <p>
        您还可以找到 <a href="http://go.microsoft.com/fwlink/?LinkID=152368"
            title="MSDN ASP.NET 文档">MSDN 上有关 ASP.NET 的文档</a>。
    </p>
    <div id="testPanel" handlerurl="/test.ashx">
    <input  id="UserName" data="Panel_UserName"/>
    <textarea id="Contexts" data="Panel_Contexts" cols="2" rows="4"></textarea>
    <a onclick="submit();">提交</a>
    </div>
    <script type="text/javascript">
        function submit() {
            alert(1);
            JTools.UI.SaveInfo($("#testPanel"), null, "submit",null);
        }
    </script>
</asp:Content>

在你指定的后台你就可以从content.Request[你指定ID]，取到你post过来的数据；

例子：

一般响应程序：test.ashx（注意路径）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Web;

namespace UFactory
{
    /// <summary>
    /// test 的摘要说明
    /// </summary>
    public class test : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string methodfunction = context.Request["CallMethod"];
            MethodInfo method = this.GetType().GetMethod(methodfunction);
            object result = method.Invoke(this,new object[] {context});

        }

        public void submit(HttpContext context)
        {
            string strName = context.Request["UserName"];
            string strContxt= context.Request["Contexts"];
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

vs2010调试通过；