.net MVC中Jquery实现AJAX详解

声明

这是我一边学,一边写的:

好处是:我从新手的角度出发,谈自己的理解,每一步的操作也都是按照新手入门来做,有截图。

坏处是:部分地方可能说的不到位或错误。不过作为新手,我觉得能先帮你理解着实现功能貌似更重要。

开始:

0 前言:

Ajax本质是一个web数据请求的手段,既然是请求,也就是有请,有求。也就是客户端(html页面)向服务器发送请求获得数据的手段。

世间万物万变不离其宗,抓住事物本质就能让我们拨云见日:

一、在服务器端写好方法

二、在客户端写好请求

当然在这之前我们还需要有个web项目作为基础,本文流程如下:

零、创建vs mvc项目(没见过从零开始的吧?)

一、在服务器端写好方法

二、在客户端写好请求

零、准备阶段:

零.1 首先我们需要在VS 中创建一个MVC项目

web->asp.net web 应用程序,如果是英文,那就是,asp.net web application,看看大叔我多贴心。不过按照这个详细法,要完成这篇文章,估计得好长时间,我还是假设大家对MVC和jquery有初步的了解吧,即便不了解,你需要去花一些时间了解一下,要不然,即便在这里走通了,你还是要回去再了解这两部分" title="">

选了第一个以后,会跳出以下界面

零.2 搭台

按照本文的流程,后面要写服务端的方法和客户端的求情,但是服务端在哪?客户端在哪?感觉好深奥啊。别害怕,非常简单:我们建了个MVC项目。其中我们可以把View看做是客户端(其实应该是View编译后的cshtml文件),我们假定一个C(控制器,也就是controller上的一个方法),对应一个V(一个 cshtml文件)

我们在HomeController中创建一个方法

 public ActionResult ShowUsers()
    {
        return View();
    }

然后邮件点击:public ActionResult ShowUsers()这一行,在跳出的菜单中,点击添加视图:

注意使用布局页的要点选上,如果你点不上,请点击下图右侧的三个点

在下图的位置中添加:

做完这些,我们就有了服务器端和客户端了,可以进行下一步了。

一、在服务器端写好方法

一.1 添加基本的实体模型,也就是数据,得有基本的数据吧,所以我们先建个模型

 public class MyModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

一.2 添加方法:

在HomeController中添加方法:

   public ActionResult DoWithUsers()
    {
        var my = new MyModel();
        try
        {
            //该方法可以动态的获取前台传过来的值,比如前台有编辑功能,单机保存调用Edit方法时,这是调用该方法可以获取到更改后的值。
            //使用Controller 基类的内置方法UpdateModel()。该方法支持使用传入的表单参数更新
            //对象的属性,它使用反射机制来解析对象的属性名称,接着基于客户端传入的参数值自动赋值给对象相

            this.UpdateModel(my);//这个是UpdateModel的用法。
            string name = my.Name;
            int age = my.Age;
            string temp = "";
            if (age < 18) temp = "的文章好烂啊1";
            else temp = ",记得烂也要写11";
            JavaScriptSerializer jss = new JavaScriptSerializer();
            return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return null;
        }
    }

服务器端的事情我们做完了,进行下一步

二 在客户端写好请求

二.1 Jquery的引入

文章的标题是AJAX的Jquery的实现,既然要使用Jquery,首先需要引入Jquery。

引入方式也很简单

进入_Layout.cshtml中,什么,你找不到?贴心大叔又来给你加血了:

双击进入以后,定位到下图的位置:

然后点开Scripts文件夹,位置如下:

鼠标左键将jquery-1.10.2.min拖入到刚才_Layout.cshtml文件定位的:@Styles.Render(“~/Content/css”)的后面。Jquery就算引入了。这时_Layout.cshtml暂时不用了,可以关掉。

返回到ShowUsers.cshtml页面,进行客户端请求的准备和编写了。

二.2客户端准备

在写请求之前需要先把客户端完善一下,即添加基本的控件,包括文本框和按钮等,代码如下:

输入你的姓名:
<input type="text" id="txtName" /><br />
输入你的年龄:
<input type="text" id="txtAge" /><br />
<button type="button" id="btn1">提交</button>
<button type="button" id="btn2">清空</button>
<p id="display"></p>

二.3 客户端请求

$(document).ready(function () {//当当前网页加载完,事件绑定,这是个很好的地方,直接用
    //function()告知加载完要干什么放在加载完的函数里。需要记忆的地方是$(document)的这个起始点
    //有个好记性对编程有好处的。
    $("#btn1").click(function () {//寻找和绑定控件的事件,这里是btn1的点击事件
        var data = "";//声明数据容器
        var name = $("#txtName").val();//获得数据
        var age = $("#txtAge").val();//获得数据
        data += "&Name=" + encodeURI(name);
        data += "&Age=" + encodeURI(age);
        $.ajax({
            async: true,
            cache: false,
            timeout: 60 * 60 * 1000,
            data: data,
            type: "GET",
            datatype: "JSON",
            url: "/Home/DoWithUsers",
            success:function(result)
            {
                result = JSON.parse(result);
                $("#display").text(result.Name + result.Message);

            },
            error: function (result) {
                $("#display").html("error");
            },
        })
    });
});

客户端完整代码如下:

@{
ViewBag.Title = "DoWithUsers";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>DoWithUsers</h2>
<script>

    $("#btn1").click(function () {
        var data = "";
        var name = $("#txtName").val();
        var age = $("#txtAge").val();
        data += "&Name=" + encodeURI(name);
        data += "&Age=" + encodeURI(age);
        $.ajax({
            async: true,
            cache: false,
            timeout: 60 * 60 * 1000,
            data: data,
            type: "GET",
            datatype: "JSON",
            url: "/Home/DoWithUsers",
            success:function(result)
            {
                result = JSON.parse(result);
                $("#display").text(result.Name + result.Message);

            },
            error: function (result) {
                $("#display").html("error");
            },
        })
    });
 });
</script>
输入你的姓名:
<input type="text" id="txtName" /><br />
输入你的年龄:
<input type="text" id="txtAge" /><br />
<button type="button" id="btn1">提交</button>
<button type="button" id="btn2">清空</button>
<p id="display"></p>

至此你的代码就能跑起来了,效果如下:

好了,你的程序跑起来了,这就结束了吗?

不能,大叔还没放大招呢。大叔攒了两个星期的怒气和一上午的法力值,肯定要鳖个大招啊(虽然大叔已经戒了梦三了)

大叔来重点逐句的讲解$.ajax()的实现:

//整个过程就是从页面中获得数据,然后把数据转换成参数传递给服务器的特定方法,处理完后,再传回来,显示在相应的控件中

整个过程就是从页面中获得数据,然后把数据转换成参数传递给服务器的特定方法,处理完后,再传回来,显示在相应的控件中

这中间,就需要需要做好一些工作:

一、基础工作:做好两个准备

1、载体的准备:利用jquery实现在合适的时候开始工作,还要告知开始的起点,一般是在document加载完时,

2、接收数据的准备:设置好数据传输的起点,即给用户交互完备的时间,然后让用户确定在什么时候提交数据,约定俗成是btn的点击事件

二、好了基础工作做好了,需要做数据的采集和传输工作了,首先是数据采集,为什么要做数据采集呢?因为我们在上面的两个准备中,其实是

做好和用户接受的工作,我们假设用户已经在页面上输入了信息,但是用户输入的信息是自然人的理解的语言,并且可能有错误,或者是

不是计算机准备接受的形式,打个比方,我们的老板或者老师是个外国人,我们知道他要给我们一个命令,要我们去做一件事,但是我们听

听不懂歪果仁的语言,怎么办呢?我们需要找个录音机把他说的话,这个过程就是:

var name =(“#txtName”).val();获得数据  
var age =(“#txtAge”).val();获得数据

搜集到他的话了,但是我们还是不懂咋办?请教懂得歪果仁话的人帮忙转换成我们的语言这就是:

encodeURI(name);和encodeURI(age);

理解了歪果仁的话以后,假设我们知道了应该用什么方法,但是方法的使用需要先决条件–参数(也有的是没有参数的,这里可以理解为参数为null)

也就是说我们这里需要传递参数,传递参数这里你可能比较陌生,感觉比较神秘,是的传递参数假设作为系统论或者是信息论的一部分时候,是很

神秘,但是当他作为网页技术的一种手段时,会有人来把这个神秘的东东做的简单,所以在网页技术的这里,他就是个格式化的字符串,而且格式

也灰常简单,就是 参数名=数值,有多个的时候用&连接,参数的字符串格式化好以后用问号和方法连接即可(方法在前)

所以这一段就是参数的格式化:

data += “&Name=” + encodeURI(name);

data += “&Age=” + encodeURI(age);

三、下面是调方法。什么是调方法呢?就是到从html的起始位置,到页面上去找到合适的方法,把参数传给他,并且获得返回的结果,然后接收

再然后显示,感觉好麻烦,还有诸如验证之类的东东,还有协议,还有数据编码,数据传输格式,请求方法等等等等等,好多好多,是不是很麻烦?

确实很麻烦。但是当作为网页技术的时候,自然有大牛们来解决这些问题,为我们提供一些简单的解决方案。此处就是AJAX技术

AJAX是个啥?这个我觉得咱的记住英文,表示下对大牛们的尊重:Aynchronous JavaScript And XML,具体是个啥,大家可以去百度。

我建议暂时先别百度,先跟我走完这一程:先不管这是个啥,我们就想用它来找服务器的方法,对这货就是用来干这个的

怎么找,这才是重点。那怎么找呢,首先你得声明,我准备用ajax技术了:怎么声明呢?ajax很有多种实现,用哪种呢?当然是用最好用的啦.

也就是jquery的实现,用jquery.ajax(…),这里有个更通用和简便的写法就是.ajax(..)没错就是jquery的缩写,所以以后你见到这个符号的时候就把理解成jquery,然后把jquery理解成JavaScript的框架,就好理解了。再回头说,ajax,我们用jquery的ajax的实现,先声明,也就是.ajax({}),我们把要做的事情放在花括号里。

现在准备填充花括号,这里不能随便填充,需要按照jquery的ajax的固定格式填写。也可以理解成给ajax这个函数传参,我们来逐个参数看:

async:这货是是否用异步?就俩选择,die or live。啊不,true(粗死) or false(饭死),(总之是胖死,我该减肥了。也正在减肥中)

然后是cache:这货是缓存,是否使用缓存(网页简单的话,一般建议不用缓存)

timeout:我理解为最长等待服务器的时间,单位是毫秒

data:这个重要,就是上面,我们传过来的参数,也就是格式化的字符串

type:请求方法:一般是GET,POST;其他的request的方法,貌似是五种来着,比较常用的是这两种,GET从服务器获得数据,POST是向服务器传输数据。

datatype:这个是数据的传输形式,这个应该和你的服务器的方法吻合(我们这就是MVC中的方法,)

url:是请求的方法,这里包括地址了。需要注意的是,安全起见,ajax只允许你请求同阈的方法。阈的概念,我理解为就是一个网站内

success:这个是请求成功的如何如何,请求成功的情况下,GET一般是是获得方法的数据,那数据在哪里呢?我们需要一个对象容器来

盛装数据,容器的名字随便,你只要把这个名字放在他输出的位置就可以了,这个位置就是success:function(容器名){..}

程序是很懒的,如果你接收了数据,啥也不干,那页面就啥也不干了(即便干,也可能按照你想要的方式干),所以我们还需要

告知接收到了数据,对这些数据干什么,这个简单了,把想干的事情放在function后的花括号里就行了,花括号真是像大海一样宽广啊。

我们这里做的事情是,将JSON数据解析成对象,JSON就是格式化的字符串,超级格式化,可以转换成对象,这也是这货这么火的原因。

顺便说一句JSON虽然不完美,但是这货确实是太美了,美的让人心痒痒,再次感叹越是简单的规则,可以迭代的规则,越神奇,

这也是为啥阿拉伯数(其实是古印度数字)是科学之王-数学的语言。数学是科学的语言,而阿拉伯计数是数学的语言。

error:错误的情况下,吧数据也赋值到result,并在页面中显示。

全文完。

感谢:博客园的SharpL,本文在他的如下文章的基础上完成的。

http://www.cnblogs.com/SharpL/p/4641040.html#id1

SharpL 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例 博客园 http://www.cnblogs.com/SharpL/p/4641040.html#id1

时间: 2024-08-04 05:45:55

.net MVC中Jquery实现AJAX详解的相关文章

jQuery的ajax详解

很多朋友都喜欢用JQ 而ajax更是JQ里必不可少的 下面为大家详细介绍一下JQ的ajax 首先 什么是ajax: AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本.HTML.XM

常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他J

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

一.jQuery插件开发分为两种:  1.类级别: 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); var i = $.add(3,2); var j = $.minus(3,2); 2.对象级别: 对

Ajax详解及使用Ajax时的返回值类型有哪些?

Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面. (注:图片来自网络) 如何使用Ajax技术 首先,需要获取XMLHttpRequest对象: var xhr; xhr = new XMLHttpRequest(); XMLH

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

JQuery选择器代码详解(三)——tokenize方法

原创文章,转载请注明出处,多谢! /* * tokenize函数是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG'