Asp.Net+JQuery.Ajax之$.post

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

在 DataTable Delete 操作中多次发送 Ajax 请求 - ASP.NET、JQuery、Ajax

ASP.NET中JQuery+AJAX调用后台

ASP.NET 2.0 JQuery AJAX 登录

带有asp .net核心的防伪令牌jquery ajax

将数据传递到处理程序的 Jquery ajax 不起作用(Asp.net、C#、Jquery)

Jquery Ajax调用asp.net后台方法