jquery在Asp.net下實現ajax

時間 2019-11-09

標籤 jquery asp.net asp 實現 ajax 欄目 JQuery 简体版

原文原文鏈接

前臺代碼：javascript

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

<!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 runat="server">
    <title></title>
       <script type="text/javascript" src="Styles/JS/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"> </script>
       <script type="text/javascript">
           function getPostName() {
               var str = "{\"Name\":'" + $("#tbxName").val() + "'}";
               $.ajax({
                   type: "post" //請求發送方法
        , url: "AjaxTest.aspx/GetName" //請求地址/方法名
        , data: str //請求參數內容
        , contentType: "application/json" //請求參數類型
        , dataType: "json" //返回值類型 xml,html,script,json,jsonp,text
        , success: function (data, textStatus) {
            if (textStatus == "success") {//返回的狀態
                alert(data.d);
            }
        }
        , error: function (msg) {
            alert("失敗！");
        }
               });
           }
       </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="tbxName" type="text" /><input id="btnPost" type="button" value="post" onclick="getPostName()" />
    </div>
    </form>
    
</body>
</html>

後臺代碼：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;
namespace WebRoot
{
    public partial class AjaxTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string GetName(string Name)
        {
            return "value is " + Name;
        }
    }
}