`
lxs647
  • 浏览: 522490 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于Ajax的同步异步问题

阅读更多
问题描述:
在做项目的过程中,碰到了如下一个问题,花了我两天的时间、、、⊙﹏⊙b汗
问题起因:由于在项目中使用的是Jquery Ajax保存的表单,现在页面上有如下两个表单:
form,和subform,
其中form中的主要内容是几个checkbox和文本框
subform中的主要内容是三个文件上传框



后台jQuery代码如下:
function submitAdminForm2(formName) {
clearError();
if(isNaN($("#pdaysvalue").val())){
alert("Please enter number for Person days! ");
return false;
}
frm = document.getElementById(formName);
frmsub = document.getElementById(formName + "sub");

var options = {
//target: "#errormessage",
        success:       showResponse,  // post-submit callback
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        location.href = "../../error/c500Error.jsp?exception=clear";
}
    };
    if(frmsub == null) {
    $(frm).ajaxForm(options);
$(frm).submit();
    } else {
    //if($("#logo1").val() != null && $("#logo1").val() != ""||
    // $("#applogo1").val() != null && $("#applogo1").val() != ""||
    // $("#char1").val() != null && $("#char1").val() != ""
//   ) {
    $("#hiddenlogo1").val($("#logo1").val());
    $("#hiddenapplogo1").val($("#applogo1").val());
    $("#hiddenchar1").val($("#char1").val());
   
$(frm).ajaxForm(options);
$(frm).submit();
    //}
$(frmsub).ajaxForm(options);
$(frmsub).submit();
    }
}

现在症状如下:
当点击保存的时候(由于项目的特殊性,数据都是保存在对应目录下的configurator_XX.properties文件中而非保存在数据库中),每当在form中上传本地图片文件后,点击【save】后保存结果是正确的,但是当我点击【clean logo】按钮后再点击【save】发现数据文件configurator_XX.properties会被覆盖掉,仅仅只是保存当前的几个结果,但是这个时候如果进行debug的话,这个现象是不会重现,但当在非debug时,又会出现这个问题,分析过后台的业务逻辑并没有出现错误。
后来经过高人指点由于jQuery Ajax是异步执行的,这个时候由于提交的两个form如果不是在同步执行的情况下就会出现以上现象,因此,在上面的代码处添加一行:(用红色标记):
var options = {
    //target: "#errormessage",
    async:false,
    success:       showResponse,  // post-submit callback
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    location.href = "../../error/c500Error.jsp?exception=clear";
   }
};

至此,该错误宣告结束O(∩_∩)O~
  • 大小: 41.3 KB
分享到:
评论

相关推荐

    AJAX同步或异步流程图

    同步AJAX流程与异步基本一致,只是`open()`方法的第三个参数设为`false`,使得浏览器等待请求完成再继续执行后续代码。 总结来说,AJAX异步通信提供了更优秀的用户体验,因为它允许用户在等待服务器响应的同时进行...

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

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

    Ajax异步与同步方法封装的js文件

    2 同步:MyAjaxs " 要调用的方法页面 方法" 参数 function d {alert d["d"] ;} ;">调用方法:1 将下载好的Ajax js文件引用到页面 代码如下:<script src " js MyAjax js" type &...

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

    在Web开发中,使用AJAX与服务器进行异步通信是常见的需求,jQuery为此提供了便捷的$.ajax()方法。但开发者们可能会遇到一个问题:在$.ajax()方法中,尽管我们试图通过return语句返回一些值,却常常发现这些返回值...

    ExtJs Ajax 同步问题

    然而,有时我们可能会遇到Ajax同步问题,这通常是由于对异步和同步理解不透彻或者配置不当导致的。下面我们将详细探讨这个问题。 在ExtJS中,Ajax请求主要通过`Ext.Ajax`对象来实现。`Ext.Ajax.request()`方法是...

    Ajax同步和异步问题浅析及解决方法

    在文档中提出了两种解决Ajax同步异步问题的方法: 1. 回调函数解决方案: 这种方法是在Ajax请求成功完成后,通过回调函数来执行依赖于异步数据返回的操作。例如,在文档提供的代码片段中: ```javascript $.get...

    浅谈js的ajax的异步和同步请求的问题

    实现Ajax同步请求的方式是通过设置`async`属性为`false`。在jQuery中,可以通过AJAX调用的选项中设置`async: false`来达到这一目的。然而,需要注意的是,在实际开发中,推荐使用异步模式,因为同步模式会阻塞浏览器...

    ajax实现异步通信

    **Ajax 实现异步通信详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户...

    解决js ajax同步请求造成浏览器假死的问题

    总结一下,解决js ajax同步请求造成浏览器假死的问题的关键在于理解浏览器单线程的特性及其在执行同步请求时会阻塞UI线程的行为。开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中...

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

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

    ajax同步和异步的优缺点

    对新手学ajax 有帮助。希望大家能够喜欢和利用。

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

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

    ajax异步请求小结

    - `true`代表异步,`false`代表同步。 3. **服务器端处理**:服务器端根据请求处理并返回部分数据。 4. **处理响应数据** ```javascript if (xhr.readyState == 4 && xhr.status == 200) { var txt = xhr....

    Ajax页面局部异步刷新技术

    ### Ajax页面局部异步刷新技术 #### 知识点概览 在现代Web开发中,异步刷新技术是一项非常重要的技术,它使得网页无需重新加载整个页面就能与服务器交互并更新部分数据。其中,最典型的技术就是Ajax(Asynchronous ...

    ajax同步异步简单实现

    AJAX分为同步(synchronous)和异步(asynchronous)两种方式: 1. 同步AJAX:请求发出后,浏览器必须等待服务器响应完成后才能继续进行其他操作,这期间浏览器会呈现挂起状态,用户不能进行任何操作。虽然这种方式...

    ajax异步提交源代码

    本文将深入探讨Ajax异步提交的核心概念,并通过两个示例——一个使用纯JavaScript与Servlet交互,另一个利用Prototype JS框架与Action通信——来阐述其实现过程。 首先,让我们理解Ajax的基本原理。Ajax工作流程...

    javascript发送ajax请求,获取返回值res,async 同步/异步

    javascript发送ajax请求,获取返回值res,async 同步/异步 var res = sendRequest({ url : "1.php", //necessary method : "post", params : { param1 : "123", param2 : "234" }, async : false });

    AJAX异步调用代码

    综上所述,这段AJAX异步调用代码示例不仅展示了前后台数据同步的基本流程,还涉及了DOM操作、错误处理等多个重要知识点,对于理解和应用AJAX技术具有较高的参考价值。在日常开发中,灵活运用这些知识,可以有效提升...

    解决ajax请求后台,有时收不到返回值的问题

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现

    ajax .net 异步请求方式

    3. AsyncPostBackTrigger和PostBackTrigger:AsyncPostBackTrigger用于触发UpdatePanel的异步回发,而PostBackTrigger则用于触发传统的同步回发。 二、jQuery AJAX jQuery是一个流行的JavaScript库,提供了方便的...

Global site tag (gtag.js) - Google Analytics