通过AJAX提交值并返回值

Question

我遇到了一点困难。基本上，我通过 jQuery 和 AJAX 将表单中的信息发送到 MySQL，然后将一个值返回到我的应用程序。

我能够将信息添加到我的数据库中，但我似乎无法弄清楚如何检索插入的数据的 ID。这是我的代码 -

function submitDeliveryDetails(){
    $.ajax({                       
        url: "http://www.mydomain.co.uk/mobileapp/add_deliverydetails.php?callback=jsonp1",
        data: addDeliveryData, // Variable holding said delivery information
        jsonp: "callback",
        dataType: "jsonp",
        success: function(data) {
            $.each(data, function(index) {
                alert(data[index].orderId);
            });                       
        },                     
        error: function(){                       
            //Do Stuff                       
        }
    })
}

这可以很好地发送信息。我能够添加到数据库并使用以下内容返回 ID

$orderId = mysql_insert_id();

，然后我为此值创建 JSON 格式，

$orderIdArray = array('orderId'=>$orderId);
echo $_GET['callback'].'('.json_encode($orderIdArray).')';

当我在 FireBug 中查看此值时，我可以看到 ID，我需要指导是如何处理此 ID 以获取它回到我的应用程序中，因为我正在以“未定义”的方式做事！

谢谢 罗里

附注我正在使用 JSONP，因为我正在处理单独域上的脚本。

纯文本 JSON -

({"orderId":125})

Answer 1

ajax 调用是异步的。这意味着 ajax 调用完成，并且在 ajax 调用正在进行时以及完成之前，代码中的以下函数将继续执行。因此，您可以对返回值执行任何操作的唯一位置是在 ajax 函数的成功处理程序中或从那里调用的任何函数中。

这需要更改编码流程，但您需要进行 ajax 调用，然后在 ajax 调用成功完成后在成功处理程序中继续执行流程。

从概念上讲，它是这样的：

function submitDeliveryDetails(){
    $.ajax({                       
        url: "http://www.mydomain.co.uk/mobileapp/add_deliverydetails.php?callback=jsonp1",
        data: addDeliveryData, // Variable holding said delivery information
        jsonp: "callback",
        dataType: "jsonp",
        success: function(data) {
            $.each(data, function(index) {
                alert(data[index].orderId);
            });                       
            // you can now continue on here with whatever you wanted to do 
            //    with the the returned JSON data
            // You can operate on the data here or call other functions 
            //    (passing the data as an argument to those functions)
        },                     
        error: function(){                       
            //Do Stuff                       
        }
    })
}

submitDeliveryDetails();
// nothing else to do here because the ajax call has not completed yet
// so the returned results from the ajax call is not available yet

Answer 2

您应该修改您的submitDeliveryDetails函数以获取成功和错误回调，然后从jQuery ajax成功和错误中调用这些回调：

function submitDeliveryDetails(options){
    $.ajax({                       
        url: "http://www.mydomain.co.uk/mobileapp/add_deliverydetails.php?callback=jsonp1",
        data: addDeliveryData, // Variable holding said delivery information
        jsonp: "callback",
        dataType: "jsonp",
        success: function(data) {
            if (options && typeof(options.success) === 'function' ) options.success(data);
        },                     
        error: function(xhr, status, err){                       
            if (options && typeof(options.error) === 'function' ) options.error(xhr, status, err);
        }
    });
}

然后调用它：

submitDeliveryDetails({
    success: function(order) {
       alert(order.orderId);
    },
    error: function(xhr, status, err) {
       // Do Stuff
    }
);