.net前台调用后台的json数据
2017-05-16 本文已影响6人
WangYatao
<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="查看后台返回的数据">
<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字符串转换为json数据
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>没有数据！</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中设置的Action对应的值
if (data=="action") {//判断获取的值是否和前台jqury ajax中Action的值相等，相同就执行下面的代码
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>();//创建一个list对象，其中useclass是一个类
foreach (string json_list in data_split)//循环遍历出结果
{
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);//创建一个user_list对象，前提是已经有useclass这个类
userslist.Add(user_list);//将数据添加到user_list集合里
}
if (userslist.Count > 0)//判断userslist的长度是否大于0
{
var user_json = new
{
code = 200,
users = userslist
};
Response.Write(JsonConvert.SerializeObject(user_json));//将字符串转换为json数据
Response.End();//结束执行后面的代码，如果不添加此结束语句，那么前台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; }//构造username的属性
public string password { get; set; }
public string phone { get; set; }
public Useclass(string _username,string _password,string _phone)//构造一个函数,以便cs里创建对象时调用
{
this.username = _username;//将构造函数里的变量值赋值给属性
this.password = _password;
this.phone = _phone;
}
public string say() //构建一个方法，在cs中创建完对象时可以使用此方法(string是具有返回值的方法)
{
string mydata = "我的用户名是：" + username + "," + "我的密码时：" + password + "," + "我的电话是："+phone+"。";//方法的动作
return mydata;//返回mydata的输出结果
}
public Useclass()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
}
<h3>效果显示</h3>
Paste_Image.png
