Question

我有一个包含三个元素的FORM;文本字段和两个选择下拉元素：

<input type="text" name="UserCode" id="UserCode">
<select name="OrderCode" id="OrderCode"></select>
<select name="RegionCode" id="RegionCode"></select>

当UserCode字段中的文本发生更改时，我想要使用JQuery触发请求以获取有关该用户的一些数据。数据以JSON格式返回。以下是JSON数据的外观（从Firebug控制台复制）：

{
"COLUMNS":["ORDERTITLE","ORDERCODE"],
"DATA":[
        ["Marketing","00000381"],["Fashion and Textile Buying Management","00006058"]
       ]
}

允许上述情况发生的JQuery代码就是这样（到目前为止）：

$(function() {
    $('#UserCode').blur(function() {
            $.ajax({
            type: 'get',
            url: '/_assets/cfc/orders/order-dbqueries.cfc',
            data: {method:'account_customer_Orders', UserCode:$(this).val()},
            dataType: 'json',
            success: function(result){
            //NO IDEA WHAT TO DO HERE TO GET THE JSON DATA INTO THE #ORDERCODE SELECT FORM ELEMENT
            } 
        });
});
});

我有一些问题：

如何获取返回的JSON数据以填充#OrderCode 选择具有如下属性的元素：<option value="OrderCode"> OrderTitle </option>
如果问题1可以成功解决，那么下一步是我的URL需要返回多个结果集，以便用ID #RegionCode填充另一个元素。如果可能的话，JQuery代码如何处理两个JSON返回？

Answer 1

在你的成功函数中：

$.map(result.DATA, function(val, i) {
    $("select[name='OrderCode']").append($("<option></option>").val(val[1]).text(val[0]));
});

现在，您可以使用相同的$ .map函数填充第二个选择#RegionCode但不同的数据。

Answer 2

我看了Łukasz的解决方案然后通过反复试验我自己想出了这个也有效：

    $(document).ready(function() {
        $('#UserCode').blur(function() {
        $.ajax({
        type: 'get',
        url: '/_assets/cfc/orders/order-dbqueries.cfc',
        data: {method:'account_customer_Orders', UserCode:$(this).val()},
        dataType: 'json',
        success: function(result) {
            $.each(result.DATA, function(index, value)
            {
            $("#OrderCode").append(
"<option value="+value[1]+">"+value[0]+" ("+value[1]+")"+"</option>");
    });             
    }
    });
    });
    });

@Łukasz你介意解释为什么以及text（）函数在你的解决方案中做了什么，你对我有不同的看法吗？是因为我的下一步将试图找出如何处理两个JSON结果吗？

如何使用$ .Ajax处理JQuery中的JSON结果

2 个答案: