zoukankan      html  css  js  c++  java
  • 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;
                }
            }
        }
    }
  • 相关阅读:
    [转]document对象execCommand的命令参数介绍
    Windows蓝屏说明
    PHP手册下载
    编写简单的代码生成工具
    EXCEL中标记两列中都存在的数据,过滤B列中存在A列中不存在的数据[原创]
    SC Create 添加服务不成功(总弹帮助信息)的原因[转]
    Excel中删除两列中重复的数据[原创]
    禁止更改桌面背景及活动桌面的批处理_最终版[原创]
    EXCEL中自动检测当前单元格或上一单元格在列A中是否存在相同数据[原创]
    EXCEL中避免同一列及相邻列中出现重复数据[原创]
  • 原文地址:https://www.cnblogs.com/qqhfeng/p/10628631.html
Copyright © 2011-2022 走看看