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

Posted 2023-05-09

【中文标题】jquery调用ajax后，更改几个输入字段

【英文标题】：jquery after calling ajax, change several input fields

【发布时间】：2020-03-04 05:30:07

【问题描述】：

jquery ajax 请求有问题：

我有一个选择字段，然后是多个输入字段。

更改选择字段后，ajax.php 从单独的文件中的数据库中获取一些信息。 如何回调这些值并将其设置到 previos 输入字段中？

我知道如何回调所有值并将它们设置在 中，但不知道如何在单独的输入字段（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";
 ?>

【问题讨论】：

ajax.php 应该以结构化格式返回数据，例如JSON（首选）、XML、CSV 等。如果返回 JSON，success: function 的参数应该是可以查询的对象

【参考方案1】：

当前您的 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">

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