在此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”的变量时。给我显示在控制台上的 undefined 值。 我尝试了多种方法来指定变量,但没有得到任何结果:
form.html
...
...
success: function (response) {
console.log(response.quantidade);
console.log(response[0].quantidade);
console.log(response[0]);
}
...
...
答案 0 :(得分:2)
您需要在dataType: 'text',
调用中将dataType: 'json',
更改为$.ajax({...})
,因为它定义了响应预处理类型http://api.jquery.com/jquery.ajax/#data-types
答案 1 :(得分:0)
您需要确保jQuery将JSON视为JSON。
默认情况下,PHP声称它输出HTML,因此您需要:
header("Content-Type: application/json");
…表示您正在发送JSON。
那么你有这个:
dataType: 'text',
…告诉jQuery忽略Content-Type标头,并将响应视为纯文本。
因此将其删除(或将其更改为dataType: 'json'
,以告诉jQuery忽略Content-Type并将响应视为JSON。