使用 AJAX 和 PHP 更新表单字段

Posted 2023-02-24

【中文标题】使用 AJAX 和 PHP 更新表单字段

【英文标题】：Updating form fields using AJAX and PHP

【发布时间】：2018-12-27 04:12:12

【问题描述】：

问题：在触发 select 输入的 onchange 事件后，如何根据 mysql 查询更新表单的选择输入值和文本输入字段？

我尝试过的： 我尝试将 AJAX 与 post 和 get 数据类型一起使用，调用一个运行查询并回显结果的 php 文件。什么都没有显示。我在此过程中遇到的任何错误通常都是导致服务器 500 错误的小问题。我在运行 JQuery AJAX 请求的函数中放置了 console.log 语句。检测到更改事件，调用ajax成功。我还尝试使用 .load() 和 GET 和 POST，也没有运气。我还有其他实现 AJAX 的功能，我尝试修改它们以适应这种情况，但没有成功。

我还尝试只使用一个选择输入，当更改时将使用 AJAX 请求和 .load 函数来显示其他输入，这些输入将在 php 端格式化并回显到页面，并选择反映 db 结果的值。

我想要的： 我想要一个简单的表单示例，其中包含一个带有三个选项的选择输入、文本类型输入和一个提交按钮。该表单是一个客户端后端表单，用于向 MySQL 数据库发送更新。每个输入代表数据库中的一个字段。这个想法是，当用户更改选择输入选定值时，会完成一个查询，该查询使用选定值仅返回一个结果。 db 中记录值的每个字段现在应该反映在表单中。首先，告诉我这是否是解决此问题的正确方法，如果不是，请告诉我您将如何处理。

示例 index.php：

    <form action="editForm.php" method="POST" enctype="multipart/form-data">
        <select id="contact_name" name="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
        </select>    
        <input type="text" name="age" placeholder="Age" required>
        <input type="text" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

当 #contact_name 的 on change 事件被触发时，我需要使用 db 的值更新字段。

您将如何实现这一点？提前致谢。

更新：这里要求的是我的 JQuery 代码，但我知道我的示例没有使用相同的名称。

    <script type="text/javascript">
  $(document).ready(function()
    $('#currency_select').on('change', function (e) 
      $.ajax(
        type: 'post',
        url: 'getCurrentValues.php',
        data: currency: 'EUR',
        success: function () 
          console.log('ajax was submitted');
        
      );
    );
  );
</script>

这是我对如何做到这一点的理解：

首先，检测事件并通过 ajax 传递数据以供查询检索记录。这是在文档准备功能中，以确保 DOM 准备就绪。

     $("#contact_name).on("change", function(e)
       $.ajax(
        type: 'post',
        url: 'editForm.php',
        data: name: this.value,
        success: function () 
          console.log('ajax was submitted');
        
      );
    ;

editForm.php：

    include 'includes/db.php';
    $name = $_POST['contact_name'];
    $sql = "SELECT * FROM contacts;";
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) 
        $lastValues = array();
        while($row = mysqli_fetch_assoc($result)) 
          $age = $row['age'];
        

        <input type="text" name="age" value="<?php echo $age; ?>">


        <?php
        
        ?>

【问题讨论】：

我理解您是否正确，您想选择“john smith”并将他的年龄、种族和退伍军人身份加载到表单中以便您进行编辑？如果您通常进行 on.("change") ajax 调用，您说您已经尝试过.. 然后您将选择的值发送到文件-> 进行数据库查询-> 然后替换完整的表单（您只需要在您的 php 文件中创建该表单）或发回一个包含年龄、种族和状态的数组并填充字段..但请发布一些您尝试过的 jquery 代码..

是的，你理解正确。一秒钟我会发布我的代码。

【参考方案1】：

你的索引：

<select id="contact_name" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select>  

<form action="editForm.php" id="form" method="POST" enctype="multipart/form-data">  
<select name="contact_name" id="contact_form" placeholder="Select Contact" required>
            <option value="John Smith">John Smith</option>
            <option value="Jane Doe">Jane Doe</option>
            <option value="George Washington"></option>
</select> 
        <input type="text" id="age" name="age" placeholder="Age" required>
        <input type="text" id="race" name="race" placeholder="Select Race" required>
        <select id="veteran_status" name="veteran_status" placeholder="Select Veteran Status" required>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </form>

    $("#contact_name").on("change", function() 
        var selected = $(this).val();
        $("#form").load("formdata.php?contact="+selected); //normaly you do that with an id as value

        OR

        $.ajax(
           type:"POST",
           url:"formdata.php",
           data: user: selected,
           dataType: "json",
           success: function(response)
              if(response.status == "success") 
                 $("#age").val(response.age);
                 $("#race").val(response.race); 
                 $("#veteran_status").val(response.status);
               else 
                 alert("No data found for this user!");
           
        );
    );

在你的 formdata.php 文件中

//make your db-query
then either make the actual input fields which will be displayed if you use load

OR make something like if you use the ajax version

if($result) 
   echo json_encode(array("status" => "success",age" => $result["age"], "race" => $result["race"], "status" => $result["status"]));
 else 
   echo json_encode(array("status" => "failed"));

您也可以删除表单中的操作、方法和编码类型，因为这将在 ajax 函数中设置；)

我建议您在选择字段中使用用户 ID 作为值，并且您还需要在表单中填写 contact_name 或创建一个隐藏的输入字段，以便您可以提交表单并知道谁的数据这是..

【讨论】：

我在原始帖子中添加了一些代码。我理解正确吗？

这应该可以。请记住，Ajax 请求是异步的。 jQuery Ajax 调用不仅仅是成功方法，您甚至应该涵盖 error() 函数出现问题的可能性 - 检查api.jquery.com/Ajax_Events

@Christopher Supertramp 如果使用 ajax 版本，能否请您画出 formatdata.php 示例？

是的，如果你回显这个 json 数组，你将在成功函数中得到结果，就像我写的那样，例如ersponse.age 等等..我也会更新它，以便您检查是否有数据（但实际上应该有数据，因为选择字段也应该从数据库中填充）

【参考方案2】：

只需在您的 editForm.php 文件中回显 $age 变量，并在 AJAX 调用成功函数中提醒响应。就这样-

editForm.php

include 'includes/db.php';
$name = $_POST['contact_name'];
$sql = "SELECT * FROM contacts;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) 
    $lastValues = array();
    while($row = mysqli_fetch_assoc($result)) 
      echo $age = $row['age'];
    
  
?>

Ajax 文件

$("#contact_name).on("change", function(e)
   $.ajax(
    type: 'post',
    url: 'editForm.php',
    data: name: this.value,
    success: function (response) 
      alert(response);
      console.log(response);
    
  );
;

【讨论】：

这行得通。克里斯托弗的回答让我朝着正确的方向前进，但我也使用了你的部分解决方案，因为我不喜欢 JSON 格式。

使用 json，您可以在 ajax 响应中访问不同的字段，例如年龄、种族、状态。并且可以使用 jquery 直接将它们挂钩到 html 文档。

你能举个例子吗？另外，如何使用响应更改选择元素中的选定选项？

好的，谢谢...我可能想多了。这是克里斯的例子，他只是呼应了一个 json 编码的数组。我想就是这么简单。我倾向于想太多。我现在尝试使用 JSON 格式