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; } //与前端保持一致
 }