C# Ajax 返回json資料--前後台互動

標籤：資料庫   pass   status   amp   div   space   javascrip   成功   linq   

 

本人實習生一枚，遇到這個問題，網上找的試了試基本不可以，自己搞了一下。可以供新手參考，大神如有指點，請不吝賜教。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

 

 

前台JavaScript代碼：

 

 1     <script> 2         function checkLogin() { 3             var name = $("#name").val(); 4             var passward = $("#password").val(); 5             console.log(name); 6             console.log(passward); 7             $.ajax({ 8                 url: ‘index.aspx?method=login‘, 9                 type: ‘GET‘,10                 data: { "name": name, "passward": passward },11                 dataType: ‘json‘,12                 success: function (dataInfo) {13                     if (dataInfo.status) {14                         console.log(dataInfo.data);15                         //前台接收到的資料中data是字串，需要轉換為JSON對象16                         var jsondata = JSON.parse(dataInfo.data);17                         alert("登陸成功，使用者名稱是："+jsondata.name+"   性別是："+jsondata.sex+"   年齡是："+jsondata.age);18                     } else {19                         alert("登陸失敗");20                     }21                 },22                 async: false23             });24 25         }26     </script>

 

當然了資料擷取成功之後，怎麼處理自己寫就好了，這裡只是示範一下。

前台HTML代碼：

 

1     <form id="form1" runat="server">2     <div>3     <input id="name" type="text" />4     <input id="password" type="password" />5     <button onclick="checkLogin()" value="">提交</button>6     </div>7     </form>

 

後台CS代碼：

 

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using Newtonsoft.Json; 8 using System.Runtime.Serialization; 9 10 namespace WebTest11 {12     public partial class index : System.Web.UI.Page13     {14         protected void Page_Load(object sender, EventArgs e)15         {16             string method = Request.QueryString["method"];17             string name = Request.QueryString["name"];18             string passward = Request.QueryString["passward"];19             if (!string.IsNullOrEmpty(method))20             {21                 if (method == "login")22                 {23                     GetLogin(name, passward);24                 }25             }26 27         }28         private void GetLogin(string name, string passward)29         {30             31             CommonModel msg = new CommonModel();32             //這裡有沒有登陸成功可以串連資料庫判斷33             if (name == "admin" && passward == "admin")34             {35                 //這裡是可以從資料庫擷取出來的登陸使用者的資訊36                 var jsonData = "{ \"name\":\"管理員\", \"sex\":\"男\", \"age\":\"20\"}";37 38                 msg.status = true;39                 msg.msg = "登陸成功";40                 msg.data = jsonData;41             }42             else43             {44                 msg.status = false;45                 msg.msg = "失敗";46             }47             object JSONObj = JsonConvert.SerializeObject(msg);48             Response.Write(JSONObj);49             //一定要加，不然前端接收失敗50             Response.End();51         }52     }53     class CommonModel54     {55         //狀態56         private bool _statues;57 58         public bool status59         {60             get { return _statues; }61             set { _statues = value; }62         }63         //訊息64         private string _msg;65 66         public string msg67         {68             get { return _msg; }69             set { _msg = value; }70         }71         //資料72         private object _data;73 74         public object data75         {76             get { return _data; }77             set { _data = value; }78         }79     }80 }

 

 

 

 

 

：

 

C# Ajax 返回json資料--前後台互動