使用AJAX直接调用后台方法

最新推荐文章于 2022-01-23 17:19:55 发布

原创最新推荐文章于 2022-01-23 17:19:55 发布 · 860 阅读

1 ·

CC 4.0 BY-SA版权

C# 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在前端使用AJAX技术直接调用后台方法，实现前后端的数据通信。通过示例展示了前台发送请求和后台接收处理的代码实现。

前台代码:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function btnClick() {
            //调用页面后台方法，前面跟方法所需的参数，接着是方法回调成功时要执行的js函数，最后一个是方法回调失败时要执行的js函数 
            var name = document.getElementById("txtName").value;
           
            PageMethods.UserName(name, funRead, funErr);
        }
        //result 就是后台方法返回的数据 
        function funRead(result) {
            alert(result);
        }
        //err 就是后台方法返回的错误信息 
        function funErr(err) {
            alert("Error:" + err._message);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <%--用户名输入文本--%>
            <input type="text" name="txtName" id="txtName" />
            <%--第一个测试,通过asp控件进行用户信息获取--%>
            <asp:Button ID="txtNamebtn" Text="点击" runat="server" OnClick="txtNamebtn_Click" />
            <%--       下面要加上EnablePageMethods="true"属性，才能使用后台方法;
            如果不加,运行时会报"PageMethods"没有定义--%>
            <asp:ScriptManager ID="sManager" runat="server" EnablePageMethods="true"></asp:ScriptManager>
            <%--  第二个测试,通过ajax获取用户信息--%>
            <input type="button" onclick="btnClick();" value="test" />
        </div>
    </form>
</body>
</html>

后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    /// <summary>
    /// 第一个测试方式,通过Request.Form.Get("控件名")来获取用户信息
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void txtNamebtn_Click(object sender, EventArgs e)
    {
        Response.Write("<script>alert('" + Request.Form.Get("txtName").ToString() + "');</script>");
    }
    /// <summary>
    /// 第二测试方式
    /// </summary>

    //首先需要添加WebMethod表示
    [System.Web.Services.WebMethod]
    //其次,添加前台调用方法,需公共静态方法 public static
    public static string UserName(string name)
    {
        return "用户名:" +name;
    }
}