ajax异步请求实例

时间:2022-09-12 21:09:11

1. 问题分析

用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图)

用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型)

获取用户所在队列的执行,需要一个参数即:username。原本想的是在数据发送页面usermanagement.php中直接用命令执行,然后再将结果发送到显示页面,这样原理上是可行的,但是地理所的用户有70多人,也就是说我要70多人全部执行完毕之后我的页面才能显示出来,这里的处理方式是同步的,也就是说结果不返回是不能看到页面的,这样导致的结果是:页面直接卡死,即使能出来,正常人也根本等不了,因为一条命令执行得3、4秒钟,谁受得了。

实际可行的解决方式是:采用ajax异步请求,重点在异步,我利用用户名处理的逻辑不在usermanagement.php中,而是转移到了usermanagement_show_queues.js中,针对加载完的页面,每一行代表一个用户,逐行读取,也就是说会逐行启动ajax去服务器端请求结果,由于是异步的页面会正常显示,也不会影响其它的事件。

2. ajax代码

$().ready(function(){
$('#userlist_table tr').each(function(i,item){
if(i>1){
$.ajax({
url:'../csm/showuserqueue-ajax.php',
type:'GET',
data:'username='+ $(this).children().eq(2).text(),
dataType:'text',
success:function(data){
$('#userlist_table tr').eq(i).children().eq(8).text(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
});

3. 代码解析

这里需要注意的是:$('#userlist_table tr').each()会逐行遍历表格的,后面function(i,item)中i代表的就是表格某一行的id。

success中:$('#userlist_table tr').eq(i).children().eq(8).text(data); 我刚开始的时候采用的是:$(this).children().eq(8).text(data);这样根本显示不出来,而且在firebug中监控中显示:$('......') undefined , 这才想到用前面的方式来写,是标记不到吗?

4. 实现效果图

一、页面加载完后,发送异步请求

ajax异步请求实例

二、请求结果返回后,显示在页面上

ajax异步请求实例

通过这个我对ajax的异步有了更深的了解,明白了什么时候用异步什么时候用同步。哈哈,加油,坚持每天的学习!!

ajax异步请求实例的更多相关文章

  1. spring HandlerInterceptorAdapter拦截ajax异步请求,报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

  2. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  3. MVC&WebForm对照学习:ajax异步请求

    写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...

  4. 黑马eesy_15 Vue:03.生命周期与ajax异步请求

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  7. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  8. AJAX异步请求原理和过程

    AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...

  9. Ajax异步请求-简单模版

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

随机推荐

  1. javascript基础03

    javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...

  2. ORACLE自定义顺序排序-转

    ORACLE可以借助DECODE函数,自定义顺序排序: select * from ( select 'Nick' as item from dual union all select 'Viki' ...

  3. BZOJ 2120&colon; 数颜色 分块

    2120: 数颜色 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php? ...

  4. php Magic methods &lowbar;&lowbar;call

    <?php class Car{ protected $_color; protected $_model; public function __call($name,$arguments){ ...

  5. 如何使用mysql

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  6. Ascll

    ascll - 概述 ASCII码(American Standard Code for Information Interchange, 美国标准信息交换码).   信息编码就是将表示信息的某种符号 ...

  7. 编写MR代码中,JAVA注意事项

    在编写一个job的过程中,发现代码中抛出 java.lang.UnsupportedOperationException 异常. 编写相似逻辑的测试代码: String[] userid = {&qu ...

  8. Delphi 常用函数记录

    //判断是否是数字 function IsNumeric(sDestStr: string): Boolean; //简写多余汉字 function SimplifyWord(sWord: strin ...

  9. UE4 Xml读写

    UE4自带一个XmlParser,可以很方便的实现Xml的读写. 1,在PublicDependencyModuleNames.AddRange中添加XmlParser. 2,include XmlP ...

  10. Selenium自动化-入门1

    起初写博客是为了妹子学习,现在发现忽略了最基础的Selenium教程,所以:从本博客开始编辑 Selenium 入门知识.(学好Java) Selenium 入门 1:(学好Java) 录制回放,简单 ...