通过写函数的方式,点击按钮调用js函数向后台发送一个请求,然后返回数据并且刷新页面

来源：蜘蛛抓取(WebSpider) 时间：2017-12-11 03:20 标签： js点击按钮执行函数
使用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 () {
type: "POST",
url: "/Home/test1",
success: function (sesponseTest) {
$("#txt1").val(sesponseTest);
很简单，下面大概介绍下用到的各个属性和方法。$(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();
type: "POST",
url: "/Home/test1",
data: "id=" + tvalue,
success: function (sesponseTest) {
$("#txt2").val(sesponseTest);
细心的大家可能会发现，和上面无参数的就是多了点点改动。这里的data: "id=" &&&& 带上了1个参数。id& 就是我的Action 的参数的名称 id&&。& 然后把文本框1的值作为参数传递给Action.
多个参数呢，data的每个参数请用&&分开，如（data: "id=12345&&str=test",）&&
注意这里的参数名称要和Action 的参数名称相同。
4、我们来看下最终效果。我们在文本框1中先输入内容，然后点击按钮，给文本框2赋值。
阅读(...) 评论()相关文章推荐
废话不多少，直接上代码：
如下：当点击停用按钮后，前一列启用状态，改为 停用
操作列的停用改为启用。
我要说的是其中一种实现方法是替换文本的方式：
jsp页面代码为：
用AJAX刷新一个DIV中的jsp内容
"text/javascript">
function startrefresh(){
xmlhttp=...
jsp局部刷新页面、异步加载页面方案
1.在jsp页面需要刷新的地方增加一个控件
2.新建一个jsp页面：aaa.jsp（用来放置需要刷新的内容）
3.向后台异步请求数据的方式刷新页面，后台返回一个j...
web开发中我们经常会遇到局部刷新页面的需求，以前我经常使用ajax和iframe实现局部刷新，后来做政府的项目，对页面的样式要求比较多，发现使用iframe控制样式什么的很麻烦，所以就采用了新的办法...
"java" import="java.util.*" pageEncoding="UTF-8"%>
"/jsp/jstl/core" prefix="c" %...
在web开发中有时有局部刷新的需求，这样做的好处是克服了页面整体刷新对网络速度受限的情况。
1.MySQL数据表如下（简单举例）：
表名：stu_info
web开发中我们经常会遇到局部刷新页面的需求，以前我经常使用ajax和iframe实现局部刷新，后来做政府的项目，对页面的样式要求比较多，发现使用iframe控制样式什么的很麻烦，所以就采用了新的办法...
转载自：/zhxiang/archive//3068579.html
通过 AJAX，JavaScript 可使用 JavaS...
通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web ...
通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web ...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)使用AJAX实现页面跳转_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
使用AJAX实现页面跳转
如题，如何使用AJAX实现页面跳转，请各位大神帮我写下代码吧，细节随便举好了。
我知道是AJAX的好处不用跳转，现在在学习AJAX，里面有一道题目就是使用AJAX实现页面跳转，怎么做到啊，
我有更好的答案
function(msg){
if (msg) {///请求需要发送的处理数据
success.location.href = '你的跳转的目标地址'$.ajax({
data:/你的请求程序页面随便啦
async:false,&#47：意思是当有返回值以后才会进行后面的js程序;根据返回值进行跳转,
url: //POST&quot:&/同步
采纳率：83%
href = “网站”ajax的优势之处就是不用刷新就能更新数据！ajax跳转可以在回调函数的最后指定window.localtion；当执行的时候就会被跳转到指定的网页了！ajax不是有个回调函数吗？在回调函数中想怎么执行的都行
ajax就是为了防止页面跳转，你倒好。。。。。。。。。。。。
1条折叠回答
为您推荐：
其他类似问题
ajax的相关知识
换一换
回答问题，赢新手礼包其他回答(8)
园豆：5684
ajax中的async:false & 就可以局部刷新
Jquery Ajax 请求数据交给 gridview，以下两篇文章可以参考一下：
收获园豆：40
用一个分布视图，partial就可以了
看看你发出的http请求是什么，如果是对新页面的请求，那必然会造成页面的刷新，要想局部刷新，就用ajax，你现在提供的信息太少，看不出来
园豆：2483
从你简单的描述中，发先你是想1、我什么点了保存，就自动刷新了？2、如何局部刷新数据。
针对1、我怀疑是你的保存按钮没有设置type="button"，导致触发了表单的submit。
针对2、请详细了解一下ajax。
园豆：35185
百度一下 mvc局部视图，异步刷新就可以了
ajax & & &或者 & angularjs
&&&您需要以后才能回答，未注册用户请先。2016年1月 总版技术专家分月排行榜第二2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
2016年1月 总版技术专家分月排行榜第二2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。

我要回帖

更多关于 js点击按钮执行函数 的文章

 

随机推荐