Asp.Net+JQuery.Ajax之$.post

段时间有点跑偏，经过米老师和师傅的耐心指导，终于认识到自己的问题，现在回归常规路线，继续B/S的学习。

经过近半个月的熏陶，对JQuery慢慢的有了亲切感。当时我采访过一清，问他看完JQuery视频有什么感觉，一清说：“能听懂，能看懂，自己做不知道从哪下手”。这可能是大多数初学者的苦衷，现在我用一个简单的登录页面，帮助大家进一步理解JQuery.Ajax的工作原理。

首先我们制作一个html页面，用于和用户交互，代码如下：

<!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>

    <title></title>

    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>

    <script src="js/login.js" type="text/javascript"></script>

</head>

<body>

    用户名：<input type="text" id="userName" /><br />

    密  码：<input type="text" id="passWord" /><br />

    <input type="button" id="login" value="登录"/>

</body>

</html>

然后我们用JQuery为html的登录按钮绑定点击事件，代码如下：

//在窗体加载时，为登录按钮绑定点击事件

$(document).ready(function () {

    $("#login").click(function () {

        $.post('login.ashx', {

            //参数一：用户名

            userName: $("#userName").val(),

            //参数二：密码

            passWord: $("#passWord").val()

        },

        //回调函数  这里不是msg.d吗？未实验

            function (data) {

                //输出结果

                alert(data);

            },

        //返回类型

            "text"

            );

    });

});

Query.post(url,[data],[callback],[type])用于和服务器交互，它有4个参数，url：告诉Ajax将数据提交到哪个页面进行处理，data：在提交过程中需要传递的参数，callback：回调函数，用于接收服务器的返回值，type：返回值的类型，一般为text或Json。

接着是用一般处理程序login.ashx(服务器)处理JQuery.Ajax通过post方法提交的请求，代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Demo

{

    /// <summary>

    /// login 的摘要说明

    /// </summary>

    public class login : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //接收Ajax传入的参数

            string userName = context.Request["userName"].ToString();

            string passWord = context.Request["passWord"].ToString();

            //将Ajax传入的参数做出判断后传回到Ajax

            if (userName == "admin" && passWord == "admin")

            {

                context.Response.Write("登录成功");

            }

            else

            {

                context.Response.Write("登录失败!");

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

巴特西

Asp.Net+JQuery.Ajax之$.post

最新文章

热门文章