使用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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php bootstrap实现简单登录
2016/03/08 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
js实现随机数小游戏
2019/06/28 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
将python代码和注释分离的方法
2018/04/21 Python
python实现换位加密算法的示例
2018/10/14 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
keras中的backend.clip用法
2020/05/22 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
2014年机关作风建设工作总结
2014/10/23 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
python单元测试之pytest的使用
2021/06/07 Python