简单的Ajax入门 - 通过jQuery和$.ajax传递post参数获得值

2017-02-06 15:45:01 访问(3529) 赞(0) 踩(0)

// HTML //

function AjaxDetailData() {
        var theResult = [];

        theResult.push({ name: "txt_TheName", value: $("#txt_TheName").val() });
        theResult.push({ name: "txt_TheCode", value: $("#txt_TheCode").val() });

        return theResult;

    }

// ashx //
        string theName = context.Request.Form["txt_TheName"];
        string theCode = context.Request.Form["txt_TheCode"];

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WebForms_WebPages_Ajaxs_v2_Default" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>简单的Ajax入门 - 通过jQuery和$.ajax传递post参数获得值</title>
    <script language="javascript" type="text/javascript" src="<%=strPhyPath %>/JS/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        table.gzTableItem {
            border-collapse: separate;
            border-spacing: 1px;
            background-color: #CDCDCD;
        }

        tr.gzTrItem {
            background-color: #FFFFFF;
        }

        td.gzTdTitleItem {
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            line-height: 20pt;
        }

        td.gzTdLeftItem {
            background-color: #FBFBFB;
            color: #666666;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            padding-right: 5px;
        }

        td.gzTdRightItem {
            /*background-color: #F0F8FB;*/
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            line-height: 20pt;
            padding-left: 5px;
        }

        td.gzTdTextItem {
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            margin-top: 0px;
            padding-top: 0px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h1>简单的Ajax入门 - 通过jQuery和$.ajax传递post参数获得值</h1>
        <table class="gzTableItem" cellspacing="0" cellpadding="5" border="0" style="width: 99%; font-size: 14px;">
            <tbody>
                <tr class="gzTrItem">
                    <td class="gzTdLeftItem" align="right" style="height: 30px; width: 100px;">名称： 
                    </td>
                    <td class="gzTdRightItem" colspan="5">
                        <asp:TextBox ID="txt_TheName" Width="99%" TextMode="MultiLine" Height="100px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr class="gzTrItem">
                    <td class="gzTdLeftItem" align="right" style="height: 30px; width: 100px;">代号： 
                    </td>
                    <td class="gzTdRightItem" colspan="5">
                        <asp:TextBox ID="txt_TheCode" Width="99%" TextMode="MultiLine" Height="100px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr class="gzTrItem">
                    <td class="gzTdLeftItem" align="right" style="height: 30px; width: 100px;"></td>
                    <td class="gzTdRightItem" colspan="5">
                        <input type="button" id="btn_OK" value="确定" onclick="AjaxGetValue()" />
                    </td>
                </tr>
                <tr class="gzTrItem">
                    <td class="gzTdLeftItem" align="right" style="height: 30px; width: 100px;">输出： 
                    </td>
                    <td class="gzTdRightItem" colspan="5">
                        <asp:TextBox ID="txt_OutputValue" Width="99%" TextMode="MultiLine" Height="100px" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

<script language="javascript" type="text/javascript">

    function AjaxDetailData() {
        var theResult = [];

        theResult.push({ name: "txt_TheName", value: $("#txt_TheName").val() });
        theResult.push({ name: "txt_TheCode", value: $("#txt_TheCode").val() });

        return theResult;

    }

    function AjaxGetValue() {

        var ajaxUrl = "<%=strPhyPath %>/Handlers/WebPages/Ajaxs/v2/AjaxHandler.ashx";

        var ajaxData = AjaxDetailData();

        $.ajax({
            cache: false,
            async: true,
            url: ajaxUrl,
            type: "post",
            data: ajaxData,
            success: function (data) {
                document.getElementById("<%=txt_OutputValue.ClientID%>").value = data;
            }
        });

        }
</script>

<%@ WebHandler Language="C#" Class="AjaxHandler" %>

using System;
using System.Web;

public class AjaxHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        
        string theName = context.Request.Form["txt_TheName"];
        string theCode = context.Request.Form["txt_TheCode"];
       
        System.Text.StringBuilder theResult  =new System.Text.StringBuilder();
        theResult.AppendLine("编程帮手：(下面是传入的值)");
        theResult.AppendLine("名称：");
        theResult.AppendLine(theName);
        theResult.AppendLine("代号：");
        theResult.AppendLine(theCode);

        // 指定中文编码输出 //
        context.Response.ContentEncoding  
            =  
            System.Text.Encoding.GetEncoding("gb2312"); // System.Text.Encoding.UTF8;  
 
        context.Response.Write(theResult.ToString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}