您的位置:首页 > Web前端 > JQuery

jQuery+Ajax+asp进行数据库交互01

2017-10-05 17:24 176 查看
在之前写的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)
{
4000

return true;
}
else
{
return false;
}
}
}
}


结果验证:

SQL数据库



页面结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery ajax jquery ajax asp