jquery ajax的async属性的理解

 1 $(function(){
 2     queryTemplateSort();
 3     //
 4     fillAddTemplatePage();
 5     function queryTemplateSort() {
 6         $.ajax({
 7             type: "post",
 8             url: "http://localhost:8080/...",
 9             data: {"pageNo": 1, "pageSize": 20},
10             dataType: "json",
11             success:function(data){
12                 var sortArray = data.dataList;
13                 for(var i = 0; i < sortArray.length; i++) {
14                     var option = "<option value=‘"+ sortArray[i].id +"‘>"+ sortArray[i].name +"</option>";
15                     var $selectElement = $(".templateSelectDiv select");
16                     $selectElement.append(option);
17                 }
18             }
19         });
20     }
21     fillAddTemplatePage();
22     function fillAddTemplatePage() {
23     var varUrl = window.location.search;
24     if(varUrl === "") {
25         return;
26     }
27     var topicid = "" + parseToNum(varUrl);
28     var jsonObject = {"topicid": topicid};
29     var jsonStr = JSON.stringify(jsonObject);
30     $.ajax({
31         type: "post",
32         url: "http://localhost:8080/....",
33         data: {‘params‘:jsonStr},
34         dataType: "json",
35         success: function(data){
36             fillData(data.obj);
37         }
38     });
39}
40        /**填充页面数据*/
41 function fillData(data) {
42     document.getElementById("magazineTopicId").value = data.id;
43     $(".templateSelectDiv select option[value=‘" + data.categoryId + "‘]")[0].selected = true;    //erro undefined
44     document.getElementById("title").value = data.varName;
45     document.getElementById("chooseMusic").value = data.music.name;
46     document.getElementById("musicLink").value = data.music.link;
47     fillPage(data);
48}
49      .....
50}
1 //jsp
2 <div class="templateSelectDiv">
3     <select >
4         <option value="0">全部</option>
5     </select>
6 </div>

加载这个jsp的时候调用queryTemplateSort方法,其中用ajax请求到数据后把选项拼接到这个select框中,第24行如果请求的url没有带参数则不填充页面数据,如果带了参数就根据一个id去查询这个页面的数据,然后回写到页面,但是因为在调用queryTemplateSort方法,ajax请求没有设置async属性,默认为true,支持异步,就是执行queryTemplateSort方法的同时分出一个线程继续向下执行fillAddTemplatePage方法,而这个方法的选择器选中的元素是queryTemplateSort执行完毕后才添加上去的,所以当如果queryTemplateSort没执行完就执行fillAddTemplatePage,下面这个语句就会报undefined的错误。当设置async: false时(意思是不分出另外的线程,执行完该方法后才会继续执行其他代码),这个时候当再执行到fillAddTemplatePage时,queryTemplateSort已经执行成功,这时就不会报错。

$(".templateSelectDiv select option[value=‘" + data.categoryId + "‘]")[0].selected = true;
时间: 2024-10-09 05:38:41

jquery ajax的async属性的理解的相关文章

ajax的async属性(控制同步和异步)

ajax中async属性用于控制同步和异步. true(异步请求,默认).意思是AJAX代码运行中的时候其他代码一样可以运行. flase(同步).意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面会出现假死状态,当AJAX执行完毕后才会继续运行其他代码,解除页面假死状态. $('input[type=button]').click(function(){ $.ajax({ url:'/test', type:'get', data:data, async:true, s

ajax之async属性

原文链接:https://www.cnblogs.com/zhaotiancheng/p/7428799.html 实际项目中,ajax可以说是非常.非常.非常 常用的.而ajax默认是 异步请求 而有的时候 ajax的异步却不是特别的好用 //查询当前餐桌类型下有多少个餐桌 function tableCount(tableTypeId){ var count = 0; $.ajax({ data:{ restaurantId:'${restaurantId}', businesstimeid

JQuery中$.ajax()方法参数详解 及 async属性说明

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

ajax中的async属性值之同步和异步及同步和异步区别

在Jquery中ajax方法中async用于控制同步和异步,当async值为true时是异步请求,当async值为fase时是同步请求.ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据. jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才

ajax 异步调用把返回值赋给一个全局变量的用法,最主要的就是把async属性改为 false,

<script> $(document).ready(function () { <% string dqsj = System.DateTime.Now.ToString("yyyy-MM-dd"); %> seach(); }); var shuju = ""; var sj = ""; function se() { seach(); } function seach() { $(function () { var

Ajax async属性

async: 默认是true:异步,false:同步. 其他属性扩展: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async: 要求为Boolean类

Java程序员之JS(一) 之 JQuery.ajax

背景:紧着现在项目的需要,先从JQuery.ajax出发,主要需求是通过 js 调用Java 代码,从而适应现在的项目. 先从几个概念开始讲解: 一. 什么是Deferred  Deferred 对象是由.Deferred构造的, .Deferred被实现为简单工厂模式.它是用来解决JS中的异步编程,遵循 Common Promise/A规范,实现此规范的还有when.js 和 dojo. Deferred 对象在 JQuery 1.5被引入,用来解决 Ajax 异步优化问题,正是由于 Defe

【转】jquery ajax 方法及各参数详解

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, type). 1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() 返回其创建的 XML

jQuery.ajax() 函数详解

jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. jQuery.ajax()函数是jQuery的底层AJAX实现.jQuery.get(). jQuery.post().load(). jQuery.getJSON(). jQuery.getScript()等函数都是该函数的简化形式(都调用该函数,只是参数设置有所不同或有所省略). 该函数属于全局