jquery+ajax(asp.net)

最新推荐文章于 2023-05-04 11:26:31 发布

Z.ain

最新推荐文章于 2023-05-04 11:26:31 发布

阅读量424

点赞数

分类专栏： asp.net相关知识

本文链接：https://blog.csdn.net/a631464421/article/details/47905665

版权

asp.net相关知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

我们实现Jquery的ajax形式，请求地址可以有多种。所以有多种处理方法。一种是ajax+ashx的方式。

比如: 前台aspx文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/ecmascript">
        $(function () {
            $("#dbtn").click(function () {
                $.ajax({
                    type: "post",
                    url: "AjaxHandler.ashx",
                    data: { admin: "admin", name: "admin" },
                    beforesend: function () {
                        $("#ds").html("loading");
                        alert("11111");
                    },
                    success: function (data) {
                        $("#ds").html("<p>"+data+"</p>");
                    }
                });
            });
        });
         

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="ds"><p>我是ajax原来的文字</p></div>
        <input type="button" value="提交ajax测试" id="dbtn" name="dbtn" />
        <br />
        <input type="text" id="CFBFM" name="CFBFM" />
     </div>
    </form>
</body>
</html>

后台的一般处理程序ashx文件。AjaxHandler.ashx

  public class AjaxHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            context.Response.ContentType = "text/plain";
            if(context.Request["admin"]=="admin"&&context.Request["name"]=="admin")
            {
                  context.Response.Write("Y");
            }
            else
            {
                context.Response.Write("N");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }

另外一种方式是ajax+aspx.cs的形式访问，不过在aspx.cs里的方法必须是public static的，而且必须加上属性[WebMethod]才行。

例子: test.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication4.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnClick").bind("click", function () {
                var txtaddress = $("#TxtAddress").val();
                var txtname = $("#TxtName").val();
     
                $.ajax({
                    type: "post",
                    url: "ttt.aspx/GetInformation",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data:"{'address':'"+txtaddress+"','name':'"+txtname+"'}",
                  
                    success: function (res) {
                        $("#msg").html(res);
                        $(res.d).each(function () {
                            $("#msg").append("<li>"+this+"</li>");
                        });
                    },
                    error: function (xmlReq, err, c) {
                        alert("error:" + err);
                    }
                }); return false;
            });
        });
      
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
      <div> 
                 <asp:Button ID="btnClick" runat="server" Text="click me" /> <br/>
                 地址:<asp:TextBox ID="TxtAddress" runat="server" ></asp:TextBox>  <br />
                 姓名:<asp:TextBox ID="TxtName" runat="server"></asp:TextBox>
               <br />     
             <span id="msg"></span> </div>
    </form>
</body>
</html>

看下请求的页面ttt.aspx.cs

 public partial class ttt : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
            }
        }
        [WebMethod]
        public static string sayHi()
        {
            return "Hi,Welcome to China!";
        }

        [WebMethod]
        public static string SayHello(string msg,string ms)
        {
            return msg+ms;
        }

        [WebMethod]
        public static string GetInformation(string address,string name)
        {
            return "hi" + address + name;
        }

        [WebMethod]
        public static List<String> GetListString(string address, string name)
        {
            List<String> list = new List<string>();
            for (int i = 0; i < 10;i++ )
            {
                list.Add("hi"+i);
            }
            list.Add("hi"+address+name);
            return list;
        }
    }

notes:1.这种方式我们看到没有。第一种方式的click事件中，后面没有return false这句话，而第二种方式的click事件中有return false这句话。那么这是为什么呢？因为第一种方式中的button是原生的button,所以不需要加return false.而第二种方式，我用的是服务器控件Button,被解析后，它的类型就是submit型的，submit会跳转会刷新页面，所以必须要用return false这句话才行，阻止页面刷新。

2.dataType:表示的是服务器传回的数据格式。 contentType:发送到服务器数据的内容编码类型(参数的数据格式)。如果是application/json格式的话，data传递的参数外面必须要双引号才行。