本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=100&extra=page%3D1

随着web技术的不断发展与进步,在web2.0时代,ajax技术作为新宠,越来越受到网页设计人员、网页开发人员的重视。使用ajax技术,可以构建动态、响应灵敏的web应用程序,这方法的关键在于浏览器的javascript、DHTML和服务器进行异步通信,它直接从浏览器与后端服务器进行通信,掐当地使用它,可以是网页更加自然,提高网页的灵敏度,提升用户体验。
ajax技术,它使浏览器为用户提供自然的浏览体验,在ajax之前,web应用程序强制用户进行提交、等待等操作。ajax提供与服务器异步通信的能力,从而使用户从浏览器的请求-响应中得到解脱。使用ajax可以在用户单击按钮是,使用javascript和DHTML立即更新网页UI,而不需要强制刷新网页,并且在更新网页的同时,向服务器发出异步请求,执行相关增删改查操作。用户甚至都觉察不到浏览器与Web服务器之间的通信。Ajax的核心工作原理是使用javascript的XmlHttpRequest对象,在此,我们就不详细解释ajax的原理了。下面讲解ASP.NET MVC3与js完成ajax通信。还是在前面的基础上进行。今天我们把上一节的登录操作使用ajax完成。
1、在LoginPage.cshtml中增加代码,代码如下

@{
ViewBag.Title = "LoginPage";
} <h2>用户登录</h2>
<h3>Post方法举例</h3>
<form action="/Home/LoginForPost" method="post">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" value="登录" />
</form>
<h3>Get方法举例</h3>
<form action="/Home/LoginForGet" method="get">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" value="登录" />
</form>
<!--ajax登录-->
<h3>ajax登录举例</h3>
<div>
<input type="text" name="name" id="name" />
<input type="password" name="password" id="password" />
<input type="button" value="登录" id="loginbtn" />
</div>
<script type="text/javascript">
$(function () {
$("#loginbtn").click(function () {
Login();
});
});
function Login() {
var name = $.trim($("#name").val());
var password = $.trim($("#password").val());
$.ajax({
url: "/Home/LoginForAjax",
data: 'name=' + escape(name) + '&password=' + escape(password),
type: "POST",
dataType: "text",
success: function (text) {
if (text == "true") {
alert('登录成功');
} else {
alert('登录失败');
}
}
});
} </script>

上述代码的javascript部分是使用jquery获取输入的name和password,然后通过ajax方法与Home控制器下的LoginForAjax进行通信。
2、在Home控制器中添加接受Ajax响应的方法LoginForAjax

public string LoginForAjax(string name, string password)
{
if (name == "" && password == "")
{
return "true";
}
else
{
return "false";
}
}

我们假设name为123,password为123时表示验证成功,验证成功返回true,验证失败返回false
3、运行,输入网址http://localhost:6187/Home/LoginPage name为123,password为123,点击登录即可。如图所示,登录成功

ajax与后台方法的交互大致如此。
下一节讲解ASP.NET MVC3使用ADO.NET连接数据库。

ASP.NET MVC3入门教程之ajax交互的更多相关文章

  1. HealthKit开发快速入门教程之HealthKit数据的操作

    HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道 ...

  2. HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID

    HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...

  3. HealthKit开发快速入门教程之HealthKit开发概述简介

    HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...

  4. nodejs入门教程之http的get和request简介及应用

    nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块 ...

  5. github 入门教程之 github 访问速度太慢怎么办

    github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...

  6. C++入门教程之二:变量

    C++入门教程之二:变量 变量,顾名思义,意思是变化的量.变量的定义是计算机语言中能储存计算结果或能表示值的抽象概念.一个基本的程序需要变量,因此变量是程序设计中的一大重点. 变量基本结构 var_t ...

  7. 14、ASP.NET MVC入门到精通——Ajax

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...

  8. ASP.NET MVC3入门教程之参数(数据)传递

    本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=98&extra=page%3D1 MVC模式的参数(数据)传递 ...

  9. ASP.NET MVC3入门教程之环境搭建

    本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=90&extra=page%3D1 什么是ASP.NET MVC ...

随机推荐

  1. 0019 Java学习笔记-面向对象-方法

    方法属于谁 方法要么属于类,要么属于对象 static修饰的方法属于类 没有static修饰的方法属于对象 方法只能定义在类里面,不能独立定义 不能独立的执行方法,要么通过类调用,要么通过方法调用 一 ...

  2. itext 实现pdf打印数字上标和下标

    https://kathleen1974.wordpress.com/category/itext-pdf/ In one of my project, we need to give the use ...

  3. android switch(String)错误:Cannot switch on a value of type String for source level below 1.7

    switch语句的判断条件可以接受int,byte,char,short,不能接受其他类型只有JDK版本1.7以上才可以支持String 设置如下可解决问题:(若没有JDK1.7版,可下载一下安装)菜 ...

  4. Neutron分析(4)—— neutron-dhcp-agent

    一.概述 neutron dhcp为租户网络提供DHCP服务,即IP地址动态分配,另外还会提供metadata请求服务. 3个主要的部件: DHCP agent scheduler:负责DHCP ag ...

  5. ovirt-engine安装

    一.安装 1.更新系统 原来是centos4.5 #yum update 升级后到6.7版本. [root@localhost ~]# cat /etc/redhat-release CentOS r ...

  6. Android+Sqlite 实现古诗阅读应用(二)

    传送门:Android+Sqlite 实现古诗阅读应用(一) Hi,又回来了,最近接到很多热情洋溢的小伙伴们的来信,吼开心哈,我会继续努力的=-=! 上回的东西我们做到了有个textview能随机选择 ...

  7. HTML标签----图文详解

    国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p>     <br>     <hr>     <center>     ...

  8. 搞netty

    开始搞netty了 查了下资料 在使用NIO 的时候,最好不要配置 SO_LINGER,假设设置了该參数,在 close的时候如缓冲区有数据待写出,会抛出 IOException. // 在netty ...

  9. guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用

    guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection ...

  10. Android驱动入门-Led控制+app+ndk库+底层驱动

    硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-20  21:56:48 本次实验使用的是 安卓APP + ...