`
469957559
  • 浏览: 39901 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jquery ajax 同步异步的执行

    博客分类:
  • js
 
阅读更多

大家先看一段简单的jquery ajax 返回值的js

function getReturnAjax{
  $.ajax({
    type:"POST",
    http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx",
    data:"username="+vusername.value,
    success:function(msg){
    if(msg=="ok"){  
   showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false)
      return true;
    }
    else
    {   
    showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false);
      vusername.className="bigwrong";
      return false;
    }
    }
  });
  }

  但是我们调用这个getReturnAjax()发现始终取得的都是false,那就是说return true,return false根本没有起作用,在火狐下用firebug调试也证明,代码根本不会执行到return 部分。


我们试想在函数里先定义一个变量,然后在ajax里赋值,最后在函数的末尾返回这个变量,会不会有效果呢?我们把代码修改如下:

代码

function getAjaxReturn()  
{
       var bol=false;
  $.ajax({
    type:"POST",
    http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx",
    data:"username="+vusername.value,
    success:function(msg){
    if(msg=="ok"){  
   showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false)
      // return true;
   bol=true;
    }
    else
    {   
    showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false);
      vusername.className="bigwrong";
      //return false;
    }
    }
  });
  return bol;
  }

 结果仍然不起作用。最后解决方案有2,如下


1、添加async:false.即修改为同步了,什么意思?(按同事解释就是,这是等这个ajax有了返回值后才会执行下面的js。一语 道破天机,怪不得以前很多ajax调用里面的赋值都不起作用)。这样等ajax给bol赋值完毕后,才执行下面的js部分。而刚刚异步的话,还没有来得及 赋值,就已经return了。

 


 

代码

function getAjaxReturn()  
{
       var bol=false;
  $.ajax({
    type:"POST",
    async:false,
    http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx",
    data:"username="+vusername.value,
    success:function(msg){
    if(msg=="ok"){  
   showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false)
      // return true;
   bol=true;
    }
    else
    {   
    showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false);
      vusername.className="bigwrong";
      //return false;
    }
    }
  });
  return bol;
  }


 

2、 通过传入一个函数解决这个问题。

function getAjaxReturn(success_function,fail_function)
{
       var bol=false;
  $.ajax({
    type:"POST",
    http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx",
    data:"username="+vusername.value,
    success:function(msg){
    if(msg=="ok"){  
   showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false)
success_function(msg);
    }
    else
    {   
    showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false);
      vusername.className="bigwrong";
fail_function(msg);
      //return false;
    }
    }
  });
function success_function(info)
{
//do what you want do
alert(info);
}
funciont fail_function(info)
{
//do what you  want do
alert(info);
}

 

 

分享到:
评论

相关推荐

    jquery ajax同步异步的执行最终解决方案

    标题中的知识点包括“jquery ajax 同步异步执行”的解决方案,即通过设置`async`属性的不同值来控制AJAX请求是同步执行还是异步执行。描述部分讲述了同步执行的一个关键点,即在AJAX请求完成前,程序会等待,不会...

    jquery ajax 同步异步的执行 return值不能取得的解决方案

    这是因为AJAX请求默认是异步执行的,所以即使在success回调函数中设置了变量,由于JavaScript的单线程特性,return语句会在AJAX请求完成之前就执行完毕,导致无法取得预期的返回值。 首先,我们来看一下,为什么在$...

    jquery ajax 同步异步的执行示例代码

    在分析和使用jQuery进行AJAX调用时,常常会遇到同步和异步执行方式的选择。在同步AJAX请求中,浏览器会停止执行后续代码,直到AJAX请求完成后才会继续。而异步AJAX请求允许浏览器同时执行其他任务,不会阻塞后续代码...

    Java通过jQuery实现ajax异步请求

    4. **异步与同步**:AJAX的核心特性是异步,意味着请求不会阻塞页面的其他操作。通过设置`async: true`(默认值),可以确保请求在后台执行。如果需要等待请求完成再进行后续操作,可以使用`async: false`,但这会...

    关于解决jquery同步异步的问题

    ### 关于解决jQuery同步异步的问题 在前端开发过程中,我们经常会使用到jQuery库来进行DOM操作及Ajax请求等。而在处理Ajax请求时,默认情况下jQuery的`$.ajax()`方法是采用异步的方式执行的,这对于大部分场景来说...

    jquery的ajax同步和异步的理解及示例

    最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 而异步则这个AJAX代码...

    jQuery_ajax异步请求

    本文将基于给定的代码示例,深入探讨jQuery的`$.ajax()`方法及其应用场景,帮助读者理解如何利用jQuery执行异步请求,以及处理响应数据。 ### 一、jQuery的$.ajax()方法详解 `$.ajax()`是jQuery库提供的一个强大且...

    jquery ajax源代码

    - **异步模式**:默认情况下,$.ajax() 方法是异步执行的。可以通过设置 async 参数来控制是否为同步请求。 - **错误处理**:确保提供 error 回调函数来优雅地处理请求失败的情况。 - **跨域问题**:如果涉及到跨域...

    Jquery Ajax简易计算器

    本项目“jQuery AJAX简易计算器”旨在展示如何利用jQuery库与服务器端进行异步数据交换,实现实时计算功能,无需页面刷新。 **jQuery与AJAX** jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、...

    传智播客 jQuery ajax 课件

    在当今的Web开发中,jQuery AJAX(异步JavaScript和XML)技术扮演着至关重要的角色。它允许开发者在不刷新整个页面的情况下与服务器进行数据交换,提高了用户体验,使得网页交互更加流畅。本篇文章将深入解析jQuery...

    jquery ajax demo

    `jQuery AJAX`是jQuery库中的一个核心功能,它极大地简化了原生JavaScript的异步数据通信过程。本教程将深入探讨"jquery ajax demo",通过实际示例展示如何利用jQuery AJAX进行数据的发送和接收。 ### 1. AJAX基础...

    jQuery Ajax无刷新提交表单并执行邮件通知

    "jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点:一是利用jQuery进行表单验证,二是通过Ajax实现无刷新提交表单,同时触发邮件通知功能。 **1. jQuery表单验证** jQuery提供了丰富的DOM操作...

    jquery封装下的ajax同步加载代码实例

    以下是对"jquery封装下的ajax同步加载代码实例"的详细解释: 首先,jQuery的$.ajax()函数是进行AJAX请求的核心方法。这个函数接受一个包含多个选项的对象作为参数,用于定制请求的各个方面。在这个实例中,我们将...

    Jquery ajax 同步阻塞引起的UI线程阻塞问题

    Jquery ajax同步阻塞问题详解 在使用Jquery进行异步数据交互时,常常会遇到ajax请求引起的问题。尤其是在同步模式下,一个请求可能会阻塞浏览器的UI线程,从而造成用户体验的严重下降。本文将详细讨论Jquery ajax...

    JQueryAjax的简介

    ### JQuery Ajax 的详细介绍 #### 一、Ajax 概述 ...总之,jQuery 提供了一系列强大且易用的方法来处理 Ajax 请求,使得 Web 开发人员能够轻松地实现异步数据交互,极大地提升了现代 Web 应用的性能和用户体验。

    jQueryAjax动态刷新技术

    4. **异步与同步请求**: 默认情况下,所有jQuery的AJAX请求都是异步的,这意味着用户可以继续交互而不等待服务器响应。如果需要等待服务器响应完成再执行后续操作,可以设置`async: false`。 5. **局部更新页面**: ...

    利用jquery Ajax验证重复

    - **async** (可选, 默认: true): 是否异步执行请求,默认为true表示异步,false表示同步。 下面是一个具体的例子,展示了如何使用jQuery AJAX进行用户名重复验证: ```javascript $(document).ready(function(){ ...

    jQuery中的ajax async同步和异步详解

    在学习jQuery的ajax使用中,我们经常会遇到同步(synchronous)和异步(asynchronous)的概念,这两个术语是异步JavaScript和XML(Ajax)编程的核心。在本文中,我们将详细讲解在jQuery的ajax方法中如何使用async参数控制...

    jquery ajax属性async(同步异步)示例

    示例2和示例3中展示的是异步请求,其中AJAX请求异步执行,因此在AJAX请求返回数据前,页面会继续执行后续的alert操作。示例3中还特别指出,当使用异步操作时,AJAX请求和后续的JavaScript代码会像两个线程一样同时...

    jQuery中异步交互技术详细指南

    除了`jQuery.ajax()`之外,jQuery还提供了一些简化版的函数,如`jQuery.get()`、`jQuery.post()`以及用于处理JSON数据的`jQuery.getJSON()`等,这些函数对于常见的异步数据交互场景非常有用。 #### 参数详解 `...

Global site tag (gtag.js) - Google Analytics