使用jQuery动态填写表单值

Question

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

基本上我希望看​​到用户离开文本字段(通过跳出或通过单击下一个字段)和繁荣,使用在该字段中输入的值提交查询,然后填充后续字段w/oa页面重新加载.

我熟悉jQuery的基础知识,但我还没有用它来做这样的事情,我从服务器上取回数据并尝试在客户端填充它.

任何关于如何最好地开始这个的建议/例子将非常感激.谢谢.

• 尼古拉斯

Answer 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 );
?>

你会想要做其他事情,比如清理电子邮件输入等,但是应该让你朝着正确的方向前进.

Answer 2

自动填充数组中的所有表单域

http://jsfiddle.net/brynner/wf0rk7tz/2/

JS

function fill(a){
    for(var k in a){
        $('[name="'+k+'"]').val(a[k]);
    }
}

array_example = {"God":"Jesus","Holy":"Spirit"};

fill(array_example);

HTML

<form>
<input name="God">
<input name="Holy">
</form>

Answer 3

如果需要访问数据库,则需要再次访问Web服务器(大部分时间).

你可以做的是使用AJAX,它向你网站上的另一个脚本发出请求以检索数据,获取数据,然后更新你想要的输入字段.

可以使用$ .ajax()函数调用在jquery中进行AJAX调用,因此会发生这种情况

用户的浏览器输入激活触发器的输入,该触发器进行AJAX调用

$('input .callAjax').bind('change', function() { 
  $.ajax({ url: 'script/ajax', 
           type: json
           data: $foo,  
           success: function(data) {
             $('input .targetAjax').val(data.newValue);
           });
  );

现在,您需要指出AJAX调用脚本(听起来像您正在使用PHP),它将执行您想要的查询并发回数据.

您可能希望使用JSON对象调用,以便传回一个javascript对象,这比返回XML更容易使用.

php函数json_encode($ phpobj); 会有用的.