前臺JavaScript代碼:
<script>
function checkLogin() {
var name = $("#name").val();
var passward = $("#password").val();
console.log(name);
console.log(passward);
$.ajax({
url: 'index.aspx?method=login',
type: 'GET',
data: { "name": name, "passward": passward },
dataType: 'json',
success: function (dataInfo) {
if (dataInfo.status) {
console.log(dataInfo.data);
//前臺接收到的數據中data是字符串,需要轉換爲JSON對象
var jsondata = JSON.parse(dataInfo.data);
alert("登陸成功,用戶名是:"+jsondata.name+" 性別是:"+jsondata.sex+" 年齡是:"+jsondata.age);
} else {
alert("登陸失敗");
}
},
async: false
});
}
</script>
當然了數據獲取成功之後,怎麼處理自己寫就好了,這裏只是示範一下。
前臺HTML代碼:
<form id="form1" runat="server">
<div>
<input id="name" type="text" />
<input id="password" type="password" />
<button onclick="checkLogin()" value="">提交</button>
</div>
</form>
後臺CS代碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using System.Runtime.Serialization;
namespace WebTest
{
public partial class index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string method = Request.QueryString["method"];
string name = Request.QueryString["name"];
string passward = Request.QueryString["passward"];
if (!string.IsNullOrEmpty(method))
{
if (method == "login")
{
GetLogin(name, passward);
}
}
}
private void GetLogin(string name, string passward)
{
CommonModel msg = new CommonModel();
//這裏有沒有登陸成功可以連接數據庫判斷
if (name == "admin" && passward == "admin")
{
//這裏是可以從數據庫獲取出來的登陸用戶的信息
var jsonData = "{ \"name\":\"管理員\", \"sex\":\"男\", \"age\":\"20\"}";
msg.status = true;
msg.msg = "登陸成功";
msg.data = jsonData;
}
else
{
msg.status = false;
msg.msg = "失敗";
}
object JSONObj = JsonConvert.SerializeObject(msg);
Response.Write(JSONObj);
//一定要加,不然前端接收失敗
Response.End();
}
}
class CommonModel
{
//狀態
private bool _statues;
public bool status
{
get { return _statues; }
set { _statues = value; }
}
//消息
private string _msg;
public string msg
{
get { return _msg; }
set { _msg = value; }
}
//數據
private object _data;
public object data
{
get { return _data; }
set { _data = value; }
}
}
}
效果圖: