学习简单的MVC中的Ajax

前端之家收集整理的这篇文章主要介绍了学习简单的MVC中的Ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 jQuery中的Ajax

1.1 $.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现。

其结构为:

方法只有一个参数,但在这个对象里包含了$.ajax@H_404_10@()所需的请求设置和回调函数等信息。

参数以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数据请求成功后的处理函数

2 实例

2.1 $.ajax()方法

我们先在建立一个控制器命名为HomeController

同时视图的Home目录下新建一个名为Index的视图,

结构如下:

视图设计:

@H_301_51@

<@H_404_10@tr@H_404_10@>@H_404_10@
<@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@input @H_404_10@id@H_404_10@="Access"@H_404_10@ type@H_404_10@="button"@H_404_10@ value@H_404_10@="Access"@H_404_10@ />@H_404_10@
</@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@div @H_404_10@id@H_404_10@="browser"@H_404_10@>@H_404_10@
</@H_404_10@div@H_404_10@>@H_404_10@
</@H_404_10@td@H_404_10@>@H_404_10@
</@H_404_10@tr@H_404_10@>@H_404_10@

脚本:

$("#Access").click(function@H_404_10@ () {
$.ajax@H_404_10@({
type: 'GET',
url: '/Home/Get_Page',
success: function@H_404_10@ (data) {
$("#browser").text(data);
}
});
});

控制器@H_404_10@中Action:

//@H_404_10@返回数据@H_404_10@
@H_404_10@ public@H_404_10@ void@H_404_10@ Get_Page()
{
List<string@H_404_10@> booklist = new@H_404_10@ List<string@H_404_10@>();
booklist.Add("@H_404_10@C#@H_404_10@"@H_404_10@);
booklist.Add("@H_404_10@J#@H_404_10@"@H_404_10@);
booklist.Add("@H_404_10@jQuery@H_404_10@"@H_404_10@);
booklist.Add("@H_404_10@JavaScript@H_404_10@"@H_404_10@);
booklist.Add("@H_404_10@PHP@H_404_10@"@H_404_10@);
foreach@H_404_10@(string@H_404_10@ strin@H_404_10@book@H_404_10@list)
{
Response.Write(str+"@H_404_10@<br>@H_404_10@"@H_404_10@);
}
}

效果


2.2 $.post()

视图设计@H_404_10@:

<@H_404_10@tr@H_404_10@>@H_404_10@
<@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@input @H_404_10@id@H_404_10@="btn"@H_404_10@ type@H_404_10@="submit"@H_404_10@ value@H_404_10@="发送数据"@H_404_10@/>@H_404_10@
</@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@td@H_404_10@>@H_404_10@
<@H_404_10@div @H_404_10@

猜你在找的Ajax相关文章