jQuery+Ajax+asp進行數據庫交互01

在之前寫的ADO操作中,每次進行數據庫操作時,都會對網頁進行刷新。之後,在瞭解jQuery(javascript庫)和Ajax(異步響應)後,可以不再刷新整個網頁,完成頁面的響應事件。

在前端代碼中,使用jQuery的Ajax方法將數據傳遞到服務器後臺中

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication4.ADO_practice.Login" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
        <title>數據庫驗證</title>
<script type="text/javascript">

    $(document).ready(function () {     //當文檔加載後要運行的函數
     $("#btnLogin").click(function () {
         var a = $("#inUsername").val();
         alert(a);
        $.ajax({
            type: "get",
            url: "Login.aspx",  //訪問的地址
            data: { name2: $("#inUsername").val(), pwd2: $("#inPassword").val() },  //從前端input中得到的值,作爲參數傳遞到後臺
            success: function (data) {   //根據後臺回調值,完成前端頁面響應事件
                if (data == 1) {
                    alert(data+"\n"+"登錄成功");
                }
                if (data==0){
                    alert(data+"\n"+"失敗");
                }
            }
        })
    })
 })
</script>

</head>
<body>
    <div>
        用戶名:<input id="inUsername" type="text" />
        密碼:  <input id="inPassword" type="password" /> 
        <button id="btnLogin" >登錄</button>
    </div>

</body>
</html>

在後臺代碼中,對傳遞的值進行進行處理,將結果寫入http響應輸入流中,也就是前端Ajax中的data值

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;


namespace WebApplication4.ADO_practice
{
    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string name = Request.QueryString["name2"];
            string pwd = Request.QueryString["pwd2"];

            if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(pwd))
            {
                if (SqlSelect02(name,pwd)==true)
                {
                    Response.Write("1");
                    Response.End();
                }
                if(SqlSelect02(name, pwd)==false)
                {
                    Response.Write("0");
                    Response.End();
                }
            }
        }

        protected bool SqlSelect02(string name,string pwd)
        {
            SqlConnection myConn = new SqlConnection("Data Source=WIN8;Initial Catalog=SqlDataTest01;Persist Security Info=True;User ID=sa;Password=123456");
            myConn.Open();

            string sqlStr = "select * from UserTable where UserName='" + name + "' and PassWord='" + pwd + "'";

            SqlCommand myCmd = new SqlCommand(sqlStr, myConn);

            object obj = myCmd.ExecuteScalar();  //執行查詢,返回結果中的第一行的第一列,忽略其他結果
            if(obj != null)
            {             
                return true;
            }
            else
            {
                return false;
            }
        }       
    }
}

結果驗證:
SQL數據庫
這裏寫圖片描述

頁面結果:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章