使用 jQuery 动态填写表单值

我知道如何使用纯 PHP 执行此操作，但我需要在不重新加载页面的情况下执行此操作。无论如何，jQuery 是否可以有效地拉回一些数据库结果（基于用户在表单上的第一个文本字段中输入的内容），然后使用从数据库查询拉回的数据填充剩余的一些字段？

本质上，我希望看到用户离开文本字段（通过跳出或单击下一个字段），然后使用在该字段中输入的值提交查询，然后填充后续字段o 页面重新加载。

我熟悉 jQuery 的基础知识，但我还没有用它来做类似的事情，即我从服务器拉回数据并尝试在客户端填充它。

任何有关如何最好地开始使用此功能的建议/示例将非常感激。谢谢。

• Nicholas

假设这个 HTML 示例：

<input type="text" name="email" id="email" />
<input type="text" name="first_name" id="first_name" />
<input type="text" name="last_name" id="last_name" />

你可以有这个 JavaScript：

$("#email").bind("change", function(e){
  $.getJSON("http://yourwebsite.com/lokup.php?email=" + $("#email").val(),
        function(data){
          $.each(data, function(i,item){
            if (item.field == "first_name") {
              $("#first_name").val(item.value);
            } else if (item.field == "last_name") {
              $("#last_name").val(item.value);
            }
          });
        });
});

然后，您就有一个 PHP 脚本（在本例中为lookup.php），它在查询字符串中获取电子邮件并返回一个 JSON 格式的数组，其中包含您想要访问的值。这是实际访问数据库来查找值的部分：

<?php
//look up the record based on email and get the firstname and lastname
...

//build the JSON array for return
$json = array(array('field' => 'first_name', 
                    'value' => $firstName), 
              array('field' => 'last_name', 
                    'value' => $last_name));
echo json_encode($json );
?>

您需要做其他事情，例如清理电子邮件输入等，但应该让您朝着正确的方向前进。