用jQuery动态填写表单值

小编典典

用jQuery动态填写表单值

ajax

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

从本质上讲，我希望用户离开文本字段（通过跳出或单击下一个字段）而离开，然后使用该字段中输入的值提交查询，然后使用w /重新加载页面。

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

任何有关如何最好地开始使用此方法的建议/示例，将不胜感激。谢谢。

尼古拉斯

阅读 246

2020-07-26

共1个答案

小编典典

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

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

2020-07-26