使用jQuery轻松实现Ajax的实例代码


Posted in Javascript onAugust 16, 2010

生成Asp.Net MVC框架后,已经包含了jQuery脚本,相关环境设置可参看我的另一篇文章:Asp.Net MVC实例。这里,我们仍然借助实例中的环境。在生成的框架中的Scripts文件夹中已经可以看到jQuery的脚本。
我们在TestModel.cs中创建一个函数,以取得Json数据,仍然使用Tets表,包含两个字段:Id和Name。

//JsonDataArray 
public static Array GetJsonArray(String name) 
{ 
Array data = null; 
try 
{ 
data = (from c in testDb.test 
where c.name.Contains(name) 
select new { c.id, c.name }).ToArray(); 
}catch(ArgumentNullException ae) 
{} 
return data; 
}

Json数据,简单来说,即使用Key-Value数组形式的数据。然后按默认选项创建一个控制器,生成的控制器只有一个方法:Index()。我们再创建一个方法,以供jQuery调用。完成的代码如下:JQueryController.cs。注意:在MVC2.0中默认情况中禁止jQuery调用服务器数据,所以必须在代码中增加访问权限:JsonRequestBehavior.AllowGet。
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using MvcWeb.Models; 
namespace MvcWeb.Controllers 
{ 
public class JQueryController : Controller 
{ 
// 
// GET: /JQuery/ 
public ActionResult Index() 
{ 
return View(); 
} 
public JsonResult FindByName(string name) 
{ 
return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet); 
} 
} 
}

然后在Index()上按右键,按默认选项生成一个视图,可在Views/JQuery看到生成的代码:Index.aspx,生成的代码非常简单,我们再插入Script代码,完成如下:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
JQuery 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$('#updater').hide(); 
$('#dataHead').hide(); 
$('#linkFind').click(function(event) { 
event.preventDefault(); 
$('#dataHead').show(); 
$('#updater').show(); 
$.getJSON('/JQuery/FindByName/', { name: $('#textSearch')[0].value }, function(data) { 
$('#testList > div').remove(); 
$.each(data, function(i, item) { 
$('#testList').append('<div>' + item.id + ' ' + item.name + '</div>'); 
}); 
}); 
$('#updater').hide(); 
}); 
}); 
</script> 
<h2>使用jQuery实现Ajax实例</h2> 
<div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">搜索</a>    
<span class="update" id="updater"> Loading...   </span></div> 
<div id="dataHead" >ID Name</div> 
<div id="testList"></div> 
</asp:Content>

运行项目,在文本框中输入“t”,按“搜索”,在页面没有刷新的情况下显示出查询到的数据,如下图:
使用jQuery轻松实现Ajax的实例代码
另外,在Ajax开发中,还可以使用Ajax的基础函数$.ajax进行调试,当出现错误时,可以打印错误信息。例如,对上述的调用可以用下面代码调试:
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$('#linkFind').click(function(event) { 
event.preventDefault(); 
var handleData = function(data) { alert("success:" + data); } 
var handleErr = function(e) { 
alert(e.responseText); 
} $.ajax({ 
type: "get", 
url: "/Jquery/FindByName", 
data: "name=t", 
success: handleData, 
error: handleErr 
}); 
}); 
}); 
</script>
Javascript 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
vue-router单页面路由
Jun 17 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 #Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 #Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 #Javascript
jquery实用代码片段集合
Aug 12 #Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 #Javascript
javascript最常用与实用的创建类的代码
Aug 12 #Javascript
javascript中最常用的继承模式 组合继承
Aug 12 #Javascript
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python学习教程之使用py2exe打包
2017/09/24 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python银行系统实战源码
2019/10/25 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python谱减法语音降噪实例
2019/12/18 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Python如何实现邮件功能
2020/05/27 Python
python爬取天气数据的实例详解
2020/11/20 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
大学生校园创业计划书
2014/02/08 职场文书
企业年会主持词
2014/03/27 职场文书
教师教学评估方案
2014/05/09 职场文书
市场总监岗位职责
2015/02/11 职场文书
主持稿开场白
2015/06/01 职场文书
Vue如何清空对象
2022/03/03 Vue.js