javascript - 如何使用 ajax 回调更新/填充多个输入字段？

Question

我下面的代码有效。一旦 ajax 调用完成，我只需要填充输入字段以更新值。但是，我不知道用于回调 php 变量($first、$last 等)以填充这些输入字段的 ajax 成功函数。提前致谢!

HTML:

<div class="field-wrap">
  <input id="first" class="form-control" name="first" value="<?php echo $first ?>"/>
  <input id="last" class="form-control" name="last" value="<?php echo $last ?>"/>
  <input id="title" class="form-control" name="title" value="<?php echo $title ?>"/>
  <input id="user_input" class="form-control" name="user_input" type="text"/>
</div>

脚本:

<script type="text/javascript">
  $(document).ready(function(){
    $('#user_input').on('change',function(){
      var input_user = $(this).val();
      if(input_user){
        $.ajax({
          type:'POST',
          url:'ajax.php',
          data:{user_input:user_input},
          success: function(){
          ???WHAT DO I NEED TO PUT HERE TO POPULATE THE INPUT FIELDS WITH DATA
          }
        }
      }
    });
  });
</script>

PHP:

$user_input = $_POST['user_input'];
$query_sql = $DB_CON_A->prepare("SELECT * FROM table_account WHERE account=:user_input");
$query_sql->bindValue(':user_input', $user_input, PDO::PARAM_STR);
$query_sql->execute();
$user = $query_sql->fetch(PDO::FETCH_ASSOC);
$first = $user['first_name'];
$last = $user['last_name'];
$title = $user['title'];

Answer 1

在你的 php 中，你可能只想 echo一个json对象/数组:

die(json_encode($user));

在您的 ajax 成功中，只需解析编码的 json字符串:

success: function(response){
    var data = JSON.parse(response);
    $('#first').val(data.first_name);
    $('#last').val(data.last_name);
    $('#title').val(data.title);
}

我可能会更改您的输入字段名称以匹配从数据库返回的列(就像您对 title 所做的那样)，这样您就可以使用 $.each()并轻松自动填充任意数量的匹配输入名称，而无需专门使用 id表单字段上的属性。你可以使用 $('input[name='+key+']').val(value);在循环中 IF 列名称与表单名称匹配。

此外，请确保您发回的是 html 安全字符串。如果用户已保存 <script>doSomething(nasty)</script>或类似的，您可能将恶意代码放入您的 html 中。我可能会使用 htmlspecialchars($value,ENT_QUOTES)为你的返回值(value)。 first_name 取决于您数据库中的内容, last_name , 和 title .