Ajax异步调用http接口后刷新页面
使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新。这里直接在html中使用js来实现:
先获取XMLHttpRequest对象
- var xmlHttp;
- //创建一个xmlHttpRequest对象
- window.onload = function createxmlHttp() {
- try {
- //尝试创建 xmlHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
- xmlHttp = new XMLHttpRequest();
- } catch (e) {
- try {
- //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.xmlHttp)。
- xmlHttp = ActiveXObject("Msxml12.XMLHTTP");
- } catch (e1) {
- try {
- //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.xmlHttp)。
- xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
- } catch (e2) {
- flag = false;
- }
- }
- }
- //判断是否成功的例子:
- if (!xmlHttp) {
- alert("creat XMLHttpRequest Object failed.");
- }
- }
这里xmlHttp作为一个js的全家变量,后续方法需要用到。再看下怎么异步调用get方式的http请求:
- //调用http接口获取接口内容
- function getMethodContent(method) {
- url = "/getMethod/" + method;
- xmlHttp.open("GET", url, true);
- xmlHttp.onreadystatechange = showContent;
- document.getElementById("interfaceName").value = method; //将接口名放入html指定div中
- xmlHttp.send();
- }
- //回调函数,显示http响应结果
- function showContent() {
- if (xmlHttp.readyState == 4) {
- if (xmlHttp.status == 200) {
- var text = xmlHttp.responseText; //这里获得服务器返回的数据
- document.getElementById("interfaceBody").innerHTML = text; //将数据放入html指定div中
- } else {
- alert("response error code:" + xmlHttp.status);
- }
- }
- }
这里通过回调函数showContent来局部刷新interfaceName和interfaceBody的值。
post的方式:
- //新增、编辑接口
- function generateInterfaceEntity() {
- url = "/editMethod/" + document.getElementById("interfaceName").value;
- xmlHttp.open("POST", url, true);
- xmlHttp.setRequestHeader("Content-type",
- "application/json;charset=UTF-8");
- xmlHttp.onreadystatechange = showActionResult;
- xmlHttp.send(document.getElementById("interfaceBody").innerHTML);
- }
- //回调函数,显示action操作结果,刷新页面
- function showActionResult() {
- if (xmlHttp.readyState == 4) {
- if (xmlHttp.status == 200) {
- alert("operation success!");
- window.location.reload();
- } else {
- alert("operation failed! response error code:" + xmlHttp.status);
- }
- }
- }
这里在新增、编辑后提示操作成功,接口通过reload来刷新整个页面。完整页面参见spring mvc+velocity使用里的页面代码。
Ajax异步调用http接口后刷新页面的更多相关文章
- <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面
<asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...
- jquery中ajax异步调用接口
之前写过一个原始的.无封装的页面,没有引入任何外部js,直接实例化Ajax的XmlRequest对象去异步调用接口,参见Ajax异步调用http接口后刷新页面,可对比一下. 现在我们用jquery包装 ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
- jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
- response 后刷新页面,点击按钮后,禁用该按钮
一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...
- 实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...
- ajax的分页查询(不刷新页面)
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...
- [转] 为什么javascript是单线程的却能让AJAX异步调用?
为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...
- 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法(转载)
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
随机推荐
- 怎么用Python提取域名中的主域名
从一个域名里面提取主域名,初想起来,貌似很简单,不就是数点[.]的个数吗?取最后一个点前后的字符串,那 abc.txt 是域名吗?那再加个验证,加上国家码,.com,.cn,.org结尾的才算,那这个 ...
- CentOS 5 上使用yum同时安装32位和64位包的解决方法
在centos上使用yum在线安装软件包的时候,有时候会同时安装32位和64位的包.并且在update的时候也会更新双份. 其实让yum只安装64位的包,只要在 /etc/yum.conf 中加个 e ...
- 编写一个程序,将 a.txt 文件中的单词与 b.txt 文件中的单词交替合并到 c.txt 文件中,a.txt 文件中的单词用回车符分隔,b.txt 文件中用回车或空格进行分隔。
package IO; import java.io.*; public class test { public void connectWords(File file1, File file2, F ...
- javascript onclick 函数不执行
今天被这个问题搞伤了. 原本是要给table中的元素添加onclick事件处理函数,刚开始还可以,后来就不行了,百试不得其解,反复检查,程序也没问题,耗了一个多小时,偏偏我就不信电脑会扯拐,就要看看还 ...
- java socket - 半关闭
通常,使用关闭输出流来表示输出已经结束.但在进行网络通信时则不能这样做.因为我们关闭输出流时,该输出流对应的Socket也将随之关闭,这样程序将无法再从该socket中读取数据. 为了应付这种情况,s ...
- struts2提交文件时,出现页面重置又无法返回input现象,我没有解决这个问题
查看资料得知,是因为我使用的tomcat是8的原因,调整到6就可以了.但我没有改变Tomcat的版本,不知道该怎么解决这个问题.
- org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法分析器在此文档中遇到多个 "64,000" 实体扩展; 这是应用程序施加的限制
使用SAX解析XML文件.XML文件有1.5G,程序抛出了这个问题: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法 ...
- CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明
CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计). 主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐 ...
- TCP粘包问题及解决方案
① TCP是个流协议,它存在粘包问题 TCP是一个基于字节流的传输服务,"流"意味着TCP所传输的数据是没有边界的.这不同于UDP提供基于消息的传输服务,其传输的数据是有边界的.T ...
- MSSQL2008 临时总结文档2014
2. 索引可以建立在基表上(基表索引),也可以视图上称为视图索引. 基表索引是建立在表数据中的,故视图索引是建立在查询后的结果集上的. (假如建立了视图索引)当从视图中取数据的时候,优化查询分析器会 ...