代码之家 › 专栏 › 技术社区 › niczak

使用jquery动态填写表单值

dynamic ajax database jquery javascript

niczak · 技术社区 · 16 年前

我知道如何使用纯PHP来完成这项工作,但我需要在不重新加载页面的情况下完成这项工作。jquery是否仍然可以有效地提取一些数据库结果(基于用户在表单的第一个文本字段中输入的内容),然后用从数据库查询中提取的数据填充剩余的一些字段?

本质上,我希望看到用户离开文本字段(通过选择或单击下一个字段)和Boom,使用该字段中输入的值提交查询,然后填充后续字段,而不重新加载页面。

我熟悉jquery的基本知识,但我还没有用它来做类似这样的事情:我将数据从服务器中拉回来,并试图填充IT客户端。

任何关于如何最好地开始这方面的建议/例子都将非常感谢。谢谢。

尼古拉斯

3 回复 | 直到 6 年前

Parrots 16 年前

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

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

FastTrack 8 年前

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

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

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>

jon skulski 16 年前

如果需要访问数据库,则需要再次访问Web服务器(大多数情况下)。

您可以使用Ajax,它向站点上的另一个脚本发出请求,以检索数据、获取数据,然后更新所需的输入字段。

可以在jquery中使用$.ajax()函数调用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);将非常有用。