Question

我需要能够在选择框中选择一个国家/地区，然后获取该国家/地区的所有州。

我正在尝试这样做：how-to-display-json-data-in-a-select-box-using-jquery

这是我的控制者：

foreach($this->settings_model->get_state_list() as $state)
{
   echo json_encode(array($state->CODSTA, $state->STANAM));
}

和我的javascript：

 $.ajax({
    url: 'settings/express_locale',
    type: 'POST',
    data: { code: location, type: typeLoc },
    success: function (data) {
        console.log(data);
    }
});

console.log向我展示了这样的内容：

["71","SomeState0"]["72","SomeState"]["73","SomeState2"]["74","SomeState3"]

所以，我需要的是将所有状态附加到新的选择框中。

但是我试图在成功回调中读取这个数组：

$.each(data, function(key,val){
   console.log(val);
});

在结果中，每一行都是一个单词，如下所示：

[
 "
 7
 1
 "
 ,
 "
 s
 ....
 ]

为什么会发生这种情况，我缺少什么？

Answer 1

JSON不是由独立块组成的。所以这永远不会做：

foreach($this->settings_model->get_state_list() as $state)
{
    echo json_encode(array($state->CODSTA, $state->STANAM));
}

输出将被视为 text ，迭代器将循环对象的元素......即单个字符。

您需要声明列表或字典。我已经包含了一些示例，具体取决于您如何在jQuery回调中使用数据。注意：在PHP端，您可能还需要为JSON输出正确的MIME类型：

$states = array();
foreach($this->settings_model->get_state_list() as $state)
{
    // Option 1: { "71": "SomeState0", "72": "Somestate2", ... }
    // Simple dictionary, and the easiest way IMHO
    $states[$state->CODSTA] = $state->STANAM;

    // Option 2: [ [ "71", "SomeState0" ], [ "72", "SomeState2" ], ... ]
    // List of tuples (well, actually 2-lists)
    // $states[] = array($state->CODSTA, $state->STANAM);

    // Option 3: [ { "71": "SomeState0" }, { "72": "SomeState2" }, ... ]
    // List of dictionaries
    // $states[] = array($state->CODSTA => $state->STANAM);
}

Header('Content-Type: application/json');
// "die" to be sure we're not outputting anything afterwards
die(json_encode($states));

在jQuery回调中，您使用charset 指定数据类型和内容类型（一旦遇到诸如奥兰群岛的状态，这将会派上用场，其中服务器在ISO中发送数据-8859-15和运行UTF8页面的浏览器可能会导致一个痛苦的WTF时刻）：

$.ajax({ url: 'settings/express_locale', type: 'POST', data: { code: location, type: typeLoc }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $("#comboId").get(0).options.length = 0; $("#comboId").get(0).options[0] = new Option("-- State --", ""); // This expects data in "option 1" format, a dictionary. $.each(data, function (codsta, stanam){ n = $("#comboId").get(0).options.length; $("#comboId").get(0).options[n] = new Option(codsta, stanam); }); }, error: function () { alert("Something went wrong"); }

Answer 2

您是否尝试过使用$ .map（）？

http://api.jquery.com/jQuery.map/

$.map(data, function(index, item) {
console.log(item)
})

Answer 3

您应该使用GET而不是POST，因为您实际上并没有创建任何新的服务器端。阅读一下REST，了解为什么在这里使用GET是正确的名词。

我添加了一个JSFiddle示例，您可以立即运行。 http://jsfiddle.net/KJMae/26/

如果这是PHP服务返回的JSON：

{
    "success":true,
    "states":[
        {
            "id":71,
            "name":"California"
        },
        {
            "id":72,
            "name":"Oregon"
        }
    ]
}

这是我们的HTML代码：

<select id="country">
    <option value="">No country selected</option>
    <option value="1">USA</option>
</select>

<select id="states">
</select>

这是添加到select中的代码可能如下所示：

// Bind change function to the select
jQuery(document).ready(function() {
    jQuery("#country").change(onCountryChange);
});

function onCountryChange()
{
    var countryId = jQuery(this).val();    

     $.ajax({
        url: '/echo/json/',
        type: 'get',
        data: {
            countryId: countryId
        },
        success: onStatesRecieveSuccess,
        error: onStatesRecieveError
    });
}

function onStatesRecieveSuccess(data)
{
    // Target select that we add the states to
    var jSelect = jQuery("#states");

    // Clear old states
    jSelect.children().remove();

    // Add new states
    jQuery(data.states).each(function(){        
        jSelect.append('<option value="'+this.id+'">'+this.name+'</option>');
    });
}

function onStatesRecieveError(data)
{
    alert("Could not get states. Select the country again.");
}

至于PHP，这里有一个简单的例子，应该给出与上面例子中使用的JSON相同的结果。（没有测试过，从头到尾，这里没有php。）

$result = new stdClass;
$result->states = array();

foreach($this->settings_model->get_state_list() as $state)
{
    $stateDto = new stdClass();
    $stateDto->id = $state->CODSTA;
    $stateDto->name = $state->STANAM;

    $result->states[] = $stateDto;
}

$result->success = true;

die(json_encode($result));

使用jQuery .each（）从数据库中读取JSON到组合框中

3 个答案: