jquery ajax Post Get 登录验证例子_H5之家 - 中国HTML5教程资源分享第一站

$.get(url, params, callback)
用GET方式请求载入远程页面实例

返回值：XMLHttpRequest

参数：

url (String): 装入页面的URL地址。
params (Map): （可选）发送到服务端的键／值对参数。
callback (Function): （可选）当远程
页面装入完成时执行的函数.
如果您需要带参数只需要
$.get(“get.html”,{参数名称1:”参数1值”,参数名称2:”参数2值”},function(data){
$(“#show”).html(data);
})

$.post(url, params, callback)

用HTTP POST方式装入一个远程页面

返回值：XMLHttpRequest

参数：
- url (String): 装入页面的URL地址。
- params (Map): （可选）发送到服务端的键／值对参数。
- callback (Function): （可选）
  当数据装入完成时执行的函数

Login登录前端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" 

Inherits="Login" %>

<!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>Login Page</title>
    <script src="jQuery.js" 

type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("#btnLogin").click(function()

{
        Login();
    });
});

function Login(){
    if(Check())
    {
        LoginSuccess();
    }
}

function Check(){
    if

($("#txtUser").val()=="")
    {
        alert("The user isn't empty");
        $("#txtUser").focus();
        return false;
    }
    if

($("#txtPassword").val()=="")
    {
        alert("The Password isn't empty")
        $("#txtPassword").focus();
        return false;
    }
    return 

true;
}

function LoginSuccess(){
    $.ajax({
            type:"POST",
            url:"CheckLogin.aspx",
            data:{userName:$("#txtUser").val

(),userPwd:$("#txtPassword").val()},
            beforeSend:function(){$("#msg").html("logining");},             

            success:function(data){
           $("#msg").html(decodeURI(data));
            }
         });
    }

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-left:32px;">    

<a>User:</a><input id="txtUser" type="text"  />
    </div>
    <div>
        <a>Password:</a><input id="txtPassword" 

type="text" />
    </div>
    <div id="msg"></div>
    <div>
        <input id="btnLogin" type="button" value="Login" 

/></div>
    </form>
</body>
</html>

checkLogin服务端代码

using System;

using System.Data;

using 

System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using 

System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class checkLogin : 

System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

string retVal = "";

            string userName = Request["userName"];

            string userPwd = Request["userPwd"];

            if (userName == "ike" 

&& userPwd == "123")

            {

                retVal = "Login is success";

            }

else

            {

                retVal = "Login is false";

            }

            Response.Write(retVal);

        }

    }

}