Database 使用 jQuery 动态填写表单值

发布于02月18日

我知道如何使用纯PHP实现这一点，但我需要在不重新加载页面的情况下实现这一点.jQuery是否可以有效地提取一些数据库结果(基于用户在表单的第一个文本字段中输入的内容)，然后用从db查询中提取的数据填充剩余的一些字段？

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

我熟悉jQuery的基础知识，但我还没有使用它做过类似的操作，即从服务器拉回数据并try 填充到客户端.

任何关于如何最好地开始这项工作的建议/例子都将不胜感激.谢谢

尼古拉斯

推荐答案

假设此示例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 );
?>

你会想做一些其他的事情，比如清理邮箱输入等等，但应该让你朝着正确的方向前进.