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

 

 

 

 

 

效果圖：