C# Ajax 返回json數據--前後臺交互

前臺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; }
        }
    }
}

效果圖:

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