0

選択ボックスで国を選択して、その国からすべての州を取得できるようにする必要があります。

私はこのようなことをしようとしています：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
 ....
 ]

なぜそれが起こるのですか、そして私は何が欠けていますか？

4

3 に答える 3

5

JSONは独立したブロックで構成されていません。したがって、これは決して行いません：

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

出力はテキストとして扱われ、イテレータはオブジェクトの要素をループします...単一の文字です。

リストまたは辞書を宣言する必要があります。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");
           }
于 2012-10-17T20:54:49.973 に答える
0

代わりに$.map（）を使用してみましたか？

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

$.map(data, function(index, item) {
console.log(item)
})
于 2012-10-17T20:54:36.853 に答える
0

実際には新しいサーバーサイドを作成していないため、POSTではなくGETを使用する必要があります。ここで、 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));
于 2012-10-17T21:56:23.217 に答える