Ajax在MVC中的应用
我们做任何系统都少不了前后台数据的交互，在PHP中，我们基本不会遇到前后台数据交互的问题，纯PHP就可以实现了。但是在.net里面我们通常要借助Ajax技术。通过这段时间的学习，这里也将jquey的Ajax技术应用到MVC框架中，与大家分享。同时时间有限，不能将各个场景都一一例举。
1 jQuery中的Ajax复习
“工欲善其事，必先利其器。”这里简单介绍一下jQuery中的Ajax中常用的方法。
1.1 $.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现。
其结构为：
该方法只有一个参数，但在这个对象里包含了$.ajax()所需的请求设置和回调函数等信息。
参数以key/value形式存在，所有参数都是可选的，常用参数如下表：
1.2 $.get()方法
$.get()方法使用GET方式来进行异步请求
它的结构：
$.get()方法参数解释如下：
1.3 $.post()方法
它与$.get()方法的结构和使用方法都相同，不过它们之间仍然有差别，这里不解释（需要的朋友请查阅相关资料进一步了解）
1.4 $.getJSON
方法定义：jQuery.getJSON( url, data, callback )
通过get请求得到json数据
·url用于提供json数据的地址页
·data(可选)用于传送到服务器的键值对
·callback(可选)回调函数，json数据请求成功后的处理函数
复习了jquery的Ajax之后我们就可以开始了。
2 实例
2.1 $.ajax()方法
照例，我们先在建立一个控制器命名为HomeController
同时视图的Home目录下新建一个名为Index的视图，
结构如下：
视图设计：
View Code
< tr >
< td >
< input id ="Access" type ="button" value ="Access" />
</ td >
< td >
< div id ="browser" >
</ div >
</ td >
</ tr >
脚本：
View Code
$("#Access").click( function () {
$.ajax({
type: 'GET',
url: '/Home/Get_Page',
success: function (data) {
$("#browser").text(data);
}
});
});
控制器中Action：
View Code
// 返回数据
public void Get_Page()
{
List< string > booklist = new List< string >();
booklist.Add( " C# " );
booklist.Add( " J# " );
booklist.Add( " jQuery " );
booklist.Add( " JavaScript " );
booklist.Add( " PHP " );
foreach ( string str in booklist)
{
Response.Write(str+ " <br> " );
}
}
效果：
2.2 $.post()
视图设计:
< tr >
< td >
< input id ="btn" type ="submit" value ="发送数据" />
</ td >
< td >
< div id ="result" >
</ div >
</ td >
</ tr >
脚本：
View Code
$("#btn").click( function () {
$.post('/Home/Page_To',
{ text: 'Lucky Hu', number: 24 },
function (data) {
alert('Your data have been saved!');
$("#result").text(data); // 用div接收返回的数
});
});
控制器中Action:
View Code
// 接收数据
public void Page_To()
{
string name = Request[ " text " ]; //
string age = Request[ " number " ];
Response.Write( " 返回结果是:姓名: " +name+ " ,年龄: " +age); // 返回到前台数据
}
效果：
2.3 $.getJSON()
视图设计：
View Code
< input id ="studentInFo" type ="button" value ="获取学生信息" />
< table id ="Student" >
< thead >
< tr >
< td >
姓名
</ td >
< td >
年龄
</ td >
< td >
性别
</ td >
</ tr >
</ thead >
< tbody >
</ tbody >
</ table >
脚本：
View Code
// 异步请求JSON格式数据
$("#studentInFo").click( function () {
$.getJSON("/Home/Get_Json",
function (data) {
/* 遍历 */
$.each(data,
function (index, p) {
var html = "<tr><td>" + p.Name + "</td>" + "<td>" + p.Age + "</td>" + "<td>" + p.Sex + "</td>" + "</tr>";
$("#Student tbody").append(html);
// alert(html);
})
});
})
控制器中Action:
View Code
// 构造Json格式数据
// 异步请求JSON 数据
public JsonResult Get_Json()
{
List<Student> slist = new List<Student>();
DataTable dt = CreateData();
for ( int i = 0 ; i < dt.Rows.Count;i++ )
{
Student s = new Student();
s.Name = dt.Rows[i][ " name " ].ToString();
s.Age = int .Parse(dt.Rows[i][ " age " ].ToString());
s.Sex = dt.Rows[i][ " sex " ].ToString();
if (s != null )
{
slist.Add(s);
}
}
// JsonRequestBehavior.AllowGet 表示允许以GET方式访问,
// 最后在页面中用getJSON()方法获取
return Json(slist,JsonRequestBehavior.AllowGet);
}
// 构造测试数据
public DataTable CreateData()
{
DataTable dt = new DataTable();
dt.Columns.Add( " name " , typeof ( string ));
dt.Columns.Add( " age " , typeof ( int ));
dt.Columns.Add( " sex " , typeof ( string ));
for ( int i = 0 ; i < 10 ;i++ )
{
dt.Rows.Add( new object [] { " lucky " +i, " 2 " +i, " 男 " });
dt.AcceptChanges();
}
return dt;
}
这里为了更加真实的展现这场景，添加了一个model实体，命名为Student
效果：
3 总结
jquery的Ajax在.NET数据交互中的应用很广泛，这里只是很常见的一些用法，实际中应用更加灵活多变。
平日由于需求的局限，自己的应用并没有达到一定深度，我想随着新项目，新需求的出现，将还会有更加深入的理解和应用。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息