javascript - jquery ajax 调用完成后如何推迟默认表单操作？

Question

我有这个表格:

<form class='setPricetInput' method='post' action='mos.php'>
<label>
<span class = 'boldFont'>Your Selling Price:</span>
<input type='text' class='moneyFormat reqPrice' autocomplete='off' name='b2'>
</label>    
<button class='setPriceButton'>set</button>
</form>

这个 jquery 点击函数:

$(".setPriceButton").click(function(){
$this = $(this);
var $thisForm = $this.parent();
var $detailLine = $this.next(".detailLine");
var buyOrderID = $detailLine.find('.orderID');    
var priceSet =ParseFloat($thisForm.find('.reqPrice').val().replace('$','')).toFixed(2);
var sendData = {'value': buyOrderID, 'type': 'Buy_Order_ID'};
$.getJSON('addToSession.php',sendData);        
var sendData = {'value': priceSet, 'type': 'Price_Set'};
$.getJSON('addToSession.php',sendData);
})   

我希望默认表单操作 (mos.php) 在 jquery 单击函数之后运行。 jquery 代码将值添加到 _SESSION，这是 mos.php 正确运行所必需的。如何将默认操作推迟到 jquery 函数完成后？

Answer 1

要在表单上运行默认提交，您需要运行.submit()。通常我们只是将其放在回调中，但由于您有 2 个 ajax 调用正在运行，我们需要确保在提交表单之前两者都已完成。为此，我们在 .click 范围之外创建一个变量和一个函数。接下来，我们创建一个函数，该函数将在每个 $.getJSON 完成时运行。现在，该函数第一次运行时将检查 firstFinished 是否设置为 true，如果没有设置为 true > 这样第二次调用就会提交表单。这样，如果第一个 $.getJSON 请求在第二个请求之后返回，您将不会遇到任何问题。

var firstFinished = false,
    getJSONDone = function(){
        if(!firstFinished){
            firstFinished = true;
            return false;
        }

        $('.setPricetInput').submit();
    };

$(".setPriceButton").click(function(e){
    e.preventDefault();
    $this = $(this);
    var $thisForm = $this.parent();
    var $detailLine = $this.next(".detailLine");
    var buyOrderID = $detailLine.find('.orderID');    
    var priceSet =ParseFloat($thisForm.find('.reqPrice').val().replace('$','')).toFixed(2);
    var sendData = {'value': buyOrderID, 'type': 'Buy_Order_ID'};
    $.getJSON('addToSession.php',sendData, getJSONDone);        
    var sendData = {'value': priceSet, 'type': 'Price_Set'};
    $.getJSON('addToSession.php',sendData, getJSONDone);
});