<h3>前端代碼</h3>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="See_jsondata" value="查看后臺返回的數(shù)據(jù)">
<p id="display"></p>
</div>
</form>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#See_jsondata").click(function () {
$.get("use_json.aspx", { Action: "action" }, function (data) {
var json_data = JSON.parse(data);//將后臺返回來的json字符串轉(zhuǎn)換為json數(shù)據(jù)
var userlist=json_data.users;
var ergodic_data = build_data_table(userlist);
$("#display").html(ergodic_data);
})
})
})
function build_data_table(users)
{
if(users.length>0)
{
var build_table = '<table border="1"><th>用戶名</th><th>密碼</th><th>手機號</th>';
for(var i=0; i<users.length; i++)
{
build_table +="<tr>"
+"<td>"+users[i].username+"</td>"
+"<td>"+users[i].password+"</td>"
+"<td>"+users[i].phone+"</td>"
+"</tr>";
}
build_table +="</table>";
}
else
{
build_table = "<p>沒有數(shù)據(jù)耻瑟！</p>";
}
return build_table;
}
</script>
</html>
<h3>后端代碼</h3>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
public partial class use_json : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string data = Request.QueryString.Get("Action");//獲取前臺jqury ajax中設(shè)置的Action對應(yīng)的值
if (data=="action") {//判斷獲取的值是否和前臺jqury ajax中Action的值相等，相同就執(zhí)行下面的代碼
string json_data = "user:123,pwd:123,phone:123;user:234,pwd:234,phone:234;user:345,pwd:345,phone:345";//將這些字符串賦值給json_data
string[] data_split = json_data.Split(';');//使用分隔符split志衍，在;處進行分割字符串述呐，將分割出的字符串賦值給string[]data_split
List<Useclass> userslist = new List<Useclass>();//創(chuàng)建一個list對象粉楚，其中useclass是一個類
foreach (string json_list in data_split)//循環(huán)遍歷出結(jié)果
{
string[] json_data_list = json_list.Split(',');//以曹货，分割字符串
string username = json_data_list[0];//將json_data_list的第一位字符串賦值給username
string password = json_data_list[1];
string phone = json_data_list[2];
Useclass user_list = new Useclass(username, password, phone);//創(chuàng)建一個user_list對象奖亚，前提是已經(jīng)有useclass這個類
userslist.Add(user_list);//將數(shù)據(jù)添加到user_list集合里
}
if (userslist.Count > 0)//判斷userslist的長度是否大于0
{
var user_json = new
{
code = 200,
users = userslist
};
Response.Write(JsonConvert.SerializeObject(user_json));//將字符串轉(zhuǎn)換為json數(shù)據(jù)
Response.End();//結(jié)束執(zhí)行后面的代碼，如果不添加此結(jié)束語句，那么前臺alert將先輸出json字符串琅攘，然后還會輸出html頁面
}
}
}
}
<h3>后端中使用的類代碼</h3>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Useclass 的摘要說明
/// </summary>
public class Useclass
{
public string username { get; set; }//構(gòu)造username的屬性
public string password { get; set; }
public string phone { get; set; }
public Useclass(string _username,string _password,string _phone)//構(gòu)造一個函數(shù),以便cs里創(chuàng)建對象時調(diào)用
{
this.username = _username;//將構(gòu)造函數(shù)里的變量值賦值給屬性
this.password = _password;
this.phone = _phone;
}
public string say() //構(gòu)建一個方法真椿，在cs中創(chuàng)建完對象時可以使用此方法(string是具有返回值的方法)
{
string mydata = "我的用戶名是：" + username + "," + "我的密碼時：" + password + "," + "我的電話是："+phone+"。";//方法的動作
return mydata;//返回mydata的輸出結(jié)果
}
public Useclass()
{
//
// TODO: 在此處添加構(gòu)造函數(shù)邏輯
//
}
}
<h3>效果顯示</h3>
Paste_Image.png
