C#、Asp.net、jQuery、ajax异步刷新实现前后端分离实例

此方法适用于初学C#，asp.net Web程序开发实现简单的前后端分离，异步刷新。

前端：

使用jQuery，ajas接受从后端传回了的json数据

$("#btn_1").on("click",function(){
var New_box=$(".new_box") //数据加载区域
var _id=''; //定义参数的值
var _name='''
$.ajax({
type:"post",
url:"indes_page.aspx/select_user",  //后端接口所在页面、需要调用的方法名
async:true,
contentType:"application/json;charset=utf-8",
dataType:"json", //参数类型json
data:"{'ID':'"+_id+"','Name':'"+_name+"'}",//字段名称需要与后端保持一致
success:function(data){
//请求成功，返回值为json
var html='';
var jsdata=JSON.parse(data.d);//将接受到的数据转回json类型
for(var i=0; i<jsdata.GetUsers[i].length;i++){	//"GetUsers"与后端接口一直
html+='<tr> ';
html+='<td>'+i+'</td>';
html+='<td>'+jsdata.GetUsers[i].UserAge+'</td>';//字段名称需要与后端保持一致
html+='<td>'+jsdata.GetUsers[i].UserPwd+'</td>';
html+='</tr>';
}
New_box.html(html); 	//将数据加载出来
},
error:function(err){
alert(err);
}
});

Asp.net后端:

需要增加的命名空间

using System.Data;
using System.Data.SqlClient;
using System.Web.Services; //[WebMethod]有关
using System.Web.Script.Serialization;// JavaScriptSerializer().Serialize();有关

C#代码段

[WebMethod]
public static string select_user(string ID, string Name)//参数名称与前端保持一致
{
DataSet ds = new DataSet();
ds=.....;//从数据库调出的数据
DataTable dt=ds.Tables[0];
List<User> users=new List<User>();
for(int i =0;i<dt.Rows.Count;i++)
{
DataRow _row=dt.Rows[i];
User userObj=new User();
userObj.UserAge=int.Parse(_row["Age"].ToString());
userObj.UserPwd=_row["Age"].ToString();
users.Add(userObj);
}
UserList userlistObj=new UserList();
userlistObj.GetUsers=users;
//反序列化，生成json字符
string _Result=new JavaScriptSerializer().Serialize(userlistObj);
//返回json字符串
return _Result;
}
public class User
{
public int UserAge { get; set; }
public string UserPwd { get; set; }
}
public class UserList
{
public List<User> GetUsers { get; set; } //与前端保持一致
}

• 点赞
• 收藏
• 分享
• 文章举报