ajax_for example
asp.net mvc 使用Ajax调用Action 返回数据。
使用asp.net mvc 调用Action方法很简单。
一、无参数方法。
1、首先，引入jquery-1.5.1.min.js 脚本，根据版本不同大家自行选择。
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
2、在Controllers中书写前台Ajax需要调用的Action，比如：
public ActionResult test1()
{
return Content("返回一个字符串");
}
这个Action返回了一个字符串。注意这里的返回，不是return View();
3、我们回到前台，假设我的功能是当页面中1个按钮单击时调用后台的Action并返回1个字符串。
<input type="text" id="txt1" name="txt1" />
<input type="button" id="btnSub" name="btnSub" value="调用Action" />
如上，我的界面里放了1个文本框和1个按钮。那下面我们来实现当按钮单击时候调用后台方法返回字符并赋值给文本框的。
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#btnSub").click(function () {
$.ajax({
type: "POST",
url: "/Home/test1",
data: "",
success: function (sesponseTest) {
$("#txt1").val(sesponseTest);
}
});
});
});
</script>
很简单，下面大概介绍下用到的各个属性和方法。 $(document).ready(function () {}; -------类似我们原来写的<body onload="loat();"> 页面加载方法。但是也有区别，具体请参考官方说明。
$("#btnSub").click(function () {}; -------按钮的单击事件。此处根据各自需要自行修改了。比如（$("#btnSub").focus(function () {}……)）等等。
$.ajax({}); -------ajax方法。
type： ------- 类型，此处为“POST” 还有 "GET"类型。
url： ------- 调用的Action 书写格式 /controller/action
data: ------- 参数，因为此处没有，所以我们为""
success: function (sesponseTest) {} ------- 回调函数，就是当我的Action 执行完后，执行的方法。sesponseTest为Action返回的内容。
$("#txt1").val(sesponseTest); ------- 把返回的字符串赋值给文本框。
4、下面就是我们最终实现效果：当我们单击按钮的时候，通过Ajax调用了后台的1个Action 并返回一个字符串给文本框赋值了。
二、带参数方法。
我们实际项目中可能经常会遇到界面中需要传递1个或多个参数给Action，最终返回结果给界面的情况。那接下来我们就来看下带参数的调用方法。
1、在原来的Action基础上我们稍作改动。
public ActionResult test1(string id)
{
return Content(id + "返回一个字符串");
}
这个Action需要一个参数id ，最后还是返回了一个字符画。
2、界面上我们再添加1个文本框。
<input type="text" id="txt1" name="txt1" /><br/>
<input type="text" id="txt2" name="txt2" /><br/>
<input type="button" id="btnSub" name="btnSub" value="调用Action" />
此处有2个文本框，我将实现：点击按钮的时候把文本框1中的内容传递到Action进行处理，最终把返回结果显示在文本框2中。
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#btnSub").click(function () {
var tvalue=$("#txt1").val();
$.ajax({
type: "POST",
url: "/Home/test1",
data: "id=" + tvalue,
success: function (sesponseTest) {
$("#txt2").val(sesponseTest);
}
});
});
});
</script>
细心的大家可能会发现，和上面无参数的就是多了点点改动。 这里的data: "id=" …… 带上了1个参数。id 就是我的Action 的参数的名称 id 。 然后把文本框1的值作为参数传递给Action.
多个参数呢，data的每个参数请用&&分开，如（data: "id=12345&&str=test",）……
注意这里的参数名称要和Action 的参数名称相同。
4、我们来看下最终效果。我们在文本框1中先输入内容，然后点击按钮，给文本框2赋值。
ajax_for example的更多相关文章
随机推荐
- 新功能：Azure Traffic Manager 嵌套配置文件
Jonathan Tuliani Azure 网络 - DNS 和 Traffic Manager 项目经理 我们很高兴地宣布,Azure Traffic Manager 支持 Traffic Ma ...
- web旋转式
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
- oracle server配置：监听程序未启动或数据库服务未注册到该监听程序
第一次安装oracle时,时完全没有任何问题的, 但是当我去配置oracle_home时,误按之下进入了Database Configuration Assistant, 然后配置已有的一个数据库,就 ...
- （Android Studio）添加文本框
此文大部分摘自http://hukai.me/android-training-course-in-chinese/basics/firstapp/building-ui.html android : ...
- About Wisdom
All human wisdom is summed up in two words --- wait and hope.人类所有的智慧可以归结为两个词---等待和希望. —— Alexandre D ...
- Excel2010: Excel使用小技巧（不断更新）
目录 1. 如何设置定时保存2. 调出“开发工具”功能区3. 在Excel单元格中输入对号和错号4. 设置单元格自动换行5. 向Excel中导入.txt文件6. 如何批量删除超链接7. 如何冻结窗格8 ...
- CRC（Cyclic Redundancy Check)循环冗余校验码与海明码的计算题
(17)采用CRC进行差错校验,生成多项式为G(X)=X4+X+1,信息码字为10111,则计算出的CRC校验码是 (17) .A．0000 B．0100 C．0010 D．1100试题 ...
- 利用过采样技术提高ADC测量微弱信号时的分辨率
1. 引言 随着科学技术的发展,人们对宏观和微观世界逐步了解,越来越多领域(物理学.化学.天文学.军事雷达.地震学.生物医学等)的微弱信号需要被检测,例如:弱磁.弱光.微震动.小位移.心电.脑电等[1 ...
- bzoj 1034 [ZJOI2008]泡泡堂BNB（贪心）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1034 [题意] 给两个序列以任意顺序比较,求出最大和最小得分. [思路] 排序后使用贪 ...
- HDU4614 Vases and Flowers
http://acm.hdu.edu.cn/showproblem.php?pid=4614 HDU 4614 Vases and Flowers (2013多校第二场线段树) // #pragma ...