我需要帮助找到同步jQuery ajax的替代方案 [英] I need help finding an alternative to synchronous jQuery ajax

问题描述

我有一个非常复杂的表单，其中包含多个标签。每个选项卡都包含一个唯一的 Plupload 实例（用于上传多个图像）。该表格允许用户上传医学图像案例，其中每个案例由多个成像研究（例如CT扫描）组成，每个研究包含多个图像。

I have a very complex form which contains multiple tabs. Each tab contains a unique Plupload instance (for uploading multiple images). The form allows a user to upload a medical image 'case' where each case is made up of multiple imaging 'studies' (e.g. CT scans) and each study contains multiple images.

当用户点击提交按钮时，我用jQuery拦截了点击，因为我需要执行以下操作：

When the user clicks the 'submit' button, I intercept the click with jQuery because I need to do the following:

1. 检查输入必填字段 [easy]


2. 从我的服务器获取唯一的ID号。每个Plupload实例都需要此ID号来知道要上传到哪个目录。

在我的函数调用表单提交时，我有以下代码段：

In my function called upon form submission I have the following code snippet:

var case_id;

// Code to check the required fields are entered
....

// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
    case_id = data;
});

// do something with case_id and other things. MUST happen after the ajax call
....

// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
    return false;
}

使用我当前的逻辑，我需要脚本暂停UNTIL它获取case_id。这在jQuery 1.8之前是可能的，但$ .ajax（）async：false属性已被弃用。

With my current logic, I need the script to pause UNTIL it gets case_id. This was possible before jQuery 1.8 but the $.ajax() async : false property has been deprecated.

我的问题是双重的：

1. 有没有办法在我获得所需的case_id之前保留脚本？


2. 如果没有，任何想法我都能做到改变我的逻辑来解决这个问题？

你可能想知道为什么case_id如此重要。 plupload实例在表单提交之前进行上传，并且需要上传目录。我希望上传的图像进入我服务器上名为case_id的文件夹。这将让服务器上的PHP脚本在获得表单POST数据的其余部分时弄清楚如何处理它们。

You might be wondering why case_id is so important. The plupload instances do their upload before the form submits and they need a directory to upload to. I want the images being uploaded to go into a folder on my server called case_id. This will let the PHP script on the server figure out what to do with them once it gets the rest of the form POSTed data.

推荐答案

这是一个非常常见的'问题'，可以通过适当的回调很容易地解决。

This is a very common 'problem' that can be solved pretty easily by using callbacks appropriately.

$("#submitButton").click(function (event) {
    event.preventDefault(); //Don't submit the form, we'll submit it manually.

    var case_id;

    // Code to check the required fields are entered
    ....

    // Get the case id number from the server
    $.get('ajax/unique-case-id').done(function(data){
        case_id = data;

        // do something with case_id and other things. MUST happen after the ajax call
        ....

        // if there was a problem uploading the images, stop the form from submitting
        if (problem_occured) {
            alert("something went wrong");
        } else {
            $("#referenceToTheForm").submit();
        }

    });
});

长话短说，在回调中保持处理问题或提交表格 $ .get调用本质上会导致脚本暂停，直到它获取数据为止。然后你可以使用像spin.js这样的东西来给用户一个良好的等待体验，直到它完成。

Long story short, keeping the "deal with problems or submit the form" inside of the callback to the $.get call will essentially cause the script to 'pause' until it gets the data back. Then you can use something like spin.js to give the user a good waiting experience until it's done.

这篇关于我需要帮助找到同步jQuery ajax的替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！