Asp.Net+JQuery.Ajax之$.post

時間 2020-08-18

標籤 asp.net+jquery.ajax asp jquery ajax post 欄目 JQuery 简体版

原文原文鏈接

段時間有點跑偏，通過米老師和師傅的耐心指導，終於認識到本身的問題，如今迴歸常規路線，繼續B/S的學習。

通過近半個月的薰陶，對JQuery慢慢的有了親切感。當時我採訪過一清，問他看完JQuery視頻有什麼感受，一清說：「能聽懂，能看懂，本身作不知道從哪下手」。這多是大多數初學者的苦衷，如今我用一個簡單的登陸頁面，幫助你們進一步理解JQuery.Ajax的工做原理。

首先咱們製做一個html頁面，用於和用戶交互，代碼以下：javascript

<!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的登陸按鈕綁定點擊事件，代碼以下：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方法提交的請求，代碼以下：java

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