JSON數據無法從Ajax調用正確返回

Question

在此HTML代碼中，當輸入字段“ nu_protocolo”失去焦點時，Ajax代碼將調用php腳本ajax.getting_data.php

HTML代碼：

form.html

<script type="text/javascript">      

    $(document).ready(function() {
        $("#nu_protocolo").focusout(function() {
            var dados = 'protocolo=' + $(this).val();

            $.ajax({
                type:           'POST',
                dataType:       'text',
                async:          true,
                url:            'ajax.getting_data.php',
                data:           dados,
                success: function (response) {                        
                    console.log(response);
                }
            });
        });
    });

</script>

<!-- Form Content  -->
<div id="content">
    <form id="form_requisicao" class="form-horizontal" action="" method="POST">
        <div class="form-group mostra_protocolo">
            <label for="nu_protocolo" class="control-label col-md-4">Número Protocolo:</label> 
            <div class="col-md-2">
                <input type="text" id="nu_protocolo" name="nu_protocolo" placeholder="Número Protocolo" type="text" class="form-control input-protocolo">
            </div>
        </div>
    </form>
</div>

PHP代碼：

ajax.getting_data.php

    <?php
    ...
    ...

    $empregados = 
        array(
            'quantidade'                    => $qt_estagiarios,
            'protocolo_ano'                 => $estagiario_prot_ano,
            'protocolo_origem'              => $estagiario_prot_origem,
            'protocolo_numero'              => $estagiario_prot_numero

        );

    $rs = json_encode($empregados, JSON_PRETTY_PRINT);
    echo $rs;

PHP代碼的輸出為：

JSON數據：

    {
    "quantidade": "2",
    "protocolo_ano": "25",
    "protocolo_origem": "40",
    "protocolo_numero": "65000"
    }

在HTML代碼中顯示控制台數據，您將獲得與硬編碼PHP代碼相同的JSON數據。 問題是當您指定類似“ quantidade”的變量時。 給我控制台上顯示的未定義值。 我嘗試了多種方法來指定變量，但沒有得到任何結果：

form.html

       ...
       ...
            success: function (response) {                        
                console.log(response.quantidade);
                console.log(response[0].quantidade);
                console.log(response[0]);
            }
       ...
       ...

Answer 1

您需要在$.ajax({...})調用中將dataType: 'text',更改為dataType: 'json',因為它定義了響應預處理類型http://api.jquery.com/jquery.ajax/ ＃data-types

Answer 2

您需要確保jQuery將JSON視為JSON。

默認情況下，PHP聲稱它輸出HTML，因此您需要：

header("Content-Type: application/json"); 

…表示您正在發送JSON。

---

然后你有這個：

 dataType: 'text', 

…告訴jQuery忽略Content-Type標頭，並將響應視為純文本。

因此，請將其刪除（或將其更改為dataType: 'json'以告訴jQuery忽略Content-Type並將響應視為JSON。