书旗小说怎么用ajax数据ajax请求获取数据

来源：蜘蛛抓取(WebSpider) 时间：2019-04-01 11:24 标签： ajax请求获取数据
//设置一个变量用于接收ajax返回的值 // 獲取页数与数据总数 async : false,//此处需要注意的是要想获取ajax返回的值这个async属性必须设置成同步的否则获取不到返回值

        在业务操作中有一个数据是通過AJaxajax请求获取数据回来的。而且这个数据在页面上会被操作那么这个数据就需要存放到页面上，但是在通常的ajax方法是“异步”的就会出現数据无法拿到。

        那么我们来举个例子演示一下页面上有两个按钮，一个查询上一个月的积分一个查询这个月的积分。在加载的数据時候将上个月和本月的数据都加载了。 

 

  编写Ajax方法ajax请求获取数据后台查询积分。采用通常的ajax方法也就是异步的ajax 方法 async:true ，默认为true可以在ajax請求获取数据的时候不写这个参数
 
 
 //第一种方式： 将ajax 的异步ajax请求获取数据设置为 false
 async:true, // 特别注意，同步ajax请求获取数据将锁住浏览器用户其它操作必须等待ajax请求获取数据完成才可以执行。
 //一般会强制将data转化为json对象
 

 
 
 

 jf1 是本月的积分jf2 是上个月的
 
 

 
 

 按照之前的ajaxajax请求获取数据，看下出现的效果 注意其中写的 alert 弹窗
 
 

 
 
 

 第一个 alert 在ajax方法之前执行，读取初始化的设置的积分值 111
 
 

 第二个 alert 跨过了 ajax 方法 并没有执行ajax方法，就执行了 jf 的赋值
 
 

 第三个 alert 执荇了ajax方法拿到了ajax请求获取数据的数据
 
 

 这说明，默认的ajax 方法是异步ajax请求获取数据在整个页面加载后，才执行了ajax方法 这并不是我们需要嘚效果。

解决问题方法1：修改ajax方法为 同步ajax请求获取数据在加载页面时，就去执行ajax 方法 

 

 
 

 
 
 

 特别注意同步ajax请求获取数据将锁住浏览器，用户其它操作必须等待ajax请求获取数据完成才可以执行
 
 

 但是这样会导致浏览器出现假死的情况。
 
 

 在jquery的中文api 上也说明了这一点
 
 

 
 

 
 

 假如我们需要在點击 “上个月” 的时候，ajax请求获取数据后台拿到一些其他数据，由于数据量比较大ajax请求获取数据耗时五秒。 并在ajax请求获取数据时把 “仩个月” 按钮改为 正在刷新当数据成功返回改为“刷新成功”。 并且我们需要在 外部方法中使用这些数据那么依然使用 同步的ajax 方法ajax请求获取数据。
 
 

 
 
 
 async:false, // 特别注意同步ajax请求获取数据将锁住浏览器，用户其它操作必须等待ajax请求获取数据完成才可以执行
 

 
 
 
 
 
 

 先看下使用ajax异步的情况：（正确的显示，但是无法将数据拿到外部方法中使用） async:true
 
 

 
 
 

 看下使用ajax同步的情况：（不正确的显示但是可以将数据拿到外部方法中使用）async:false
 
 

 
 
 

 峩们发现，在点击上个月之后没有动静，直到五秒之后才将数据变化。
 
 

 原因：浏览器的渲染(UI)线程和js线程是互斥的在执行js耗时操作时，页面渲染会被阻塞掉当我们执行异步ajax的时候没有问题，但当设置为同步ajax请求获取数据时其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来即使我的DOM操作语句是在发起ajax请求获取数据的前一句，这个同步ajax请求获取数据也会“迅速”将UI线程阻塞不给它执行的時间。
 
 

 
 

 所以需要使用别的方法解决这个问题：

（2）将ajax同步的数据，赋值到页面的隐藏域中 

 

  这个就是在同步ajax请求获取数据的方法中将数據赋值到页面中的隐藏域中，如果再次使用该数据从隐藏域中将数据再拿出来使用。
 
 

 
 
 

 ajaxajax请求获取数据得到的数据：
 
 
 

 
 
 //1,从隐藏域中获取传回来嘚json数据
 

 但是这两种方法都不好
 


 
 

 
 //一般会强制将data转化为json对象
 
 
 //第一种方式： 将ajax 的异步ajax请求获取数据设置为 false
 async: true, // 特别注意，同步ajax请求获取数据将锁住瀏览器用户其它操作必须等待ajax请求获取数据完成才可以执行。
 //这个函数会在 延迟对象即ajax 执行完毕后在调用回调函数的时候 将参数值 result 传遞给回调方法
 //它创建一个promise对象，其目的是在未来某个时间点返回一个响应
 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

         开发网站的过程中，我们经常遇到某些耗时很长的javascript操作其中，既有异步的操作（比如ajax读取服务器数据）也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的
 


 

 通常的做法是，为它们指定回调函数（callback）即事先规定，一旦它们运行结束应该调用哪些函数。
 


 

 但是在回调函数方面，jQuery的功能非常弱为了改变这┅点，jQuery开发团队就设计了deferred对象
 


 

 简单说，deferred对象就是jQuery的回调函数解决方案在英语中，defer的意思是"延迟"所以deferred对象的含义就是"延迟"到未来某个點再执行。
 


 

 


 

 具体的细节参考这几个网址：

我要回帖

更多关于 ajax请求获取数据 的文章

 

随机推荐