jQuery.ajax()调用asp.net后台方法

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。介意方法名不要重名

建一个WebFormAjax名aspx文件

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

<!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.js"></script>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(
       function () {

           $("#btnClick").bind("click", function () {
               $.ajax({
                   type: "post",
                   url: "WebFormAjax.aspx/ajaxTest0",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       $("#msg").css("color", "#0000FF").html(data.d);
                   },
                   error: function (err) {
                       $("#msg").css("color", "#FF0000").html("access faield:" + err);
                   }
               });
               return false;
           });

           $("#Button1").bind("click", function () {
               var add = $("#txtAddress").val();
               var txtname = $("#txtName").val();
               $.ajax({
                   type: "post",
                   url: "WebFormAjax.aspx/ajaxTest",
                   data: "{'address':'" + add + "','name':'" + txtname + "'}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       $("#msg1").css("color", "#0000FF").html(data.d);
                   },
                   error: function (err) {
                       $("#msg1").css("color", "#FF0000").html("access faield:" + err);
                   }
               });
               return false;
           });

           $("#Button2").bind("click", function () {
               var add = $("TextBox1").val();
               var name = $("TextBox2").val();
               $.ajax({
                   type: "post",
                   url: "WebFormAjax.aspx/ajaxTestList",
                   data: "{'address':'" + add + "','name':'" + name + "'}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       $("#msg2").html("");
                       $(data.d).each(function () {
                           $("#msg2").append("<li>" + this + "</li>");
                       });
                       $("#msg2").css("color", "#0000ff");
                   },
                   error: function (err) {
                       $("#msg").css("color", "#FF0000").html("access faield:" + err);
                   }
               });
               return false;
           });

           $("#Button3").bind("click", function () {
               var add = $("#TextBox3").val();
               var txtname = $("#TextBox4").val();
               $.ajax({
                   type: "post",
                   url: "WebFormAjax.aspx/SortedList",
                   data: "{'address':'" + add + "','name':'" + txtname + "'}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       $("#msg3").html("");

                       //这里只取部分键、值显示
                       $("#msg3").append("<li>" + data.d["0_key"] + "</li>");
                       $("#msg3").append("<li>" + data.d["1_key"] + "</li>");
                       $("#msg3").append("<li>" + data.d["2_key"] + "</li>");
                       $("#msg3").append("<li>" + data.d["_key"] + "</li>");


                       $("#msg3").css("color", "#0000FF");
                   },
                   error: function (err) {
                       $("#msg3").css("color", "#FF0000").html("access faield:" + err);
                   }
               });
               return false;
           });
           
           $("#Button4").bind("click", function () {
               $.ajax({
                   url: "xml/XMLFile1.xml",
                   dataType: "xml",
                   success: function (xmlData) {
                       $("#msg4").html("");
                       $(xmlData).find("books>book").each(function () {
                           $("#msg4").append("====new book====");
                           $("#msg4").append("<li>name:" + $(this).find("name").text() + "</li>");
                           $("#msg4").append("<li>author:" + $(this).find("author").text() + "</li>");
                           $("#msg4").append("<li>wordCount:" + $(this).find("wordCount").text() + "</li>");
                           $("#msg4").append("<li>price:" + $(this).find("price").text() + "</li>");
                       });
                       $("#msg4").css("color", "#0000FF");
                   },
                   error: function (err) {
                       $("#msg4").css("color", "#FF0000").html("access faield:" + err);
                   }
               });
               return false;
           });
           //
       });

    </script>
</head>
<body>
    <form id="form1" runat="server">
  <div>
        <asp:Button ID="btnClick" runat="server" Text="click me" OnClick="btnClick_Click" />
        <br />
        <span id="msg"></span>
 </div>
        <!--参数-->
        <div>
        <asp:But