jquery在Asp.net下实现ajax

前台代码：

<%@ 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>

后台代码：

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;
        }
    }
}

最终效果：

按钮提交后效果：

 posted on 2013-11-10 22:28  托雷  阅读(190)  评论(0)    收藏  举报