jquery调用ajax后,更改几个输入字段



我对jquery ajax请求有问题:

我有一个选择字段,然后是一个以上的输入字段。

在更改select字段后,ajax.php会在单独的文件中从数据库中获取一些信息。如何回调这些值并将其设置到以前的输入字段中?

我知道如何回调所有值并将其设置在中,但不知道如何在单独的输入字段(data_1、data_2、data_3(中设置值

<select name="call_ajax" id="call_ajax">
<input type="text" value="1">Value 1
<input type="text" value="2">Value 2
</select>
<input type="text" id="data_1" value="some old data 1">
<input type="text" id="data_2" value="some old data 2">
<input type="text" id="data_3" value="some old data 3">
<script>
$("#call_ajax").change(function() {
$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(html)
{                 
$("#what").html(html); // ???????  
} 
}); 
});
</script>  

ajax.php

<?php 
$new_data1 = "new value 1";
$new_data2 = "new value 2";
$new_data3 = "new value 3";
?>

当前您的PHP脚本返回一个空页面-Ajax进程没有输入。您需要使用PHP脚本输出一些数据,例如JSON格式:

<?php 
$new_data1 = "new value 1";
$new_data2 = "new value 2";
$new_data3 = "new value 3";
echo json_encode(array("data_1"=>$new_data1,
"data_2"=>$new_data2,
"data_3"=>$new_data3));
?>

这将返回以下内容:

{"data_1":"new value 1","data_2":"new value 2","data_3":"new value 3"}

然后你的脚本可以像一样使用这些信息

// sample data:
var dat={"data_1":"new value 1","data_2":"new value 2","data_3":"new value 3"};
$("#call_ajax").change(function() {
/*  $.getJSON("ajax.php",
function(dat){  */
// inside the callback do the following with dat:
$("input:text").each(function(){
this.value=dat[this.id]; })
/*    });     */
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="call_ajax" id="call_ajax">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="text" id="data_1" value="some old data 1">
<input type="text" id="data_2" value="some old data 2">
<input type="text" id="data_3" value="some old data 3">

此外,请注意,<select>元素内不能有<input>元素。请改用<option>

最新更新