使用 jQuery 动态填写表单值

Posted 2023-02-24

【中文标题】使用 jQuery 动态填写表单值

【英文标题】：Dynamically fill in form values with jQuery

【发布时间】：2009-02-17 19:48:04

【问题描述】：

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

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

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

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

尼古拉斯

【问题讨论】：

一个 BoomQuery 事件 ;)

【参考方案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 );
?>

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

【讨论】：

我似乎无法让它工作...错误：G 未定义 init()()jquery-1....1.min.js（第 12 行）（？） ()()test.html（第 15 行） I()jquery-1....1.min.js（第 19 行） F()()jquery-1....1.min.js（第 19 行) [打破这个错误] (function()var l=this,g,y=l.jQuery,p=l.....each(function()o.dequeue(this,E)) );

有没有什么有效的方法可以向你展示我的完整源码？不能在这里使用 300 个字符的限制...

有可以发布的服务器吗？

不是公开的...我可以通过电子邮件发送到您博客上的表格吗？

通过网络表单顺利通过了吗？

【参考方案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>

【讨论】：

例如，您可以在 ajax 请求之后使用它。

这非常有用。感谢您发布此内容。

这个解决方案非常适合 IMO

【参考方案3】：

如果您需要访问数据库，则需要再次访问 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);会有用的。

【讨论】：

好吧，对于 url: 属性，我将它传递给我的 php 脚本，但是 data: 属性呢？ $foo 代表什么？

查看docs.jquery.com/Ajax/jQuery.ajax#options data: $foo 基本上是 $_POST 或 $_GET 字符串，您可能需要将其发送到脚本以获取上下文。所以如果你的脚本是 script.php?id=5&name=toasty 那么 $foo 看起来像 $foo = id: 5;名称：“烤面包”

这个工作：“数据：id：$（'#sid'）.val（），”？还是应该将变量（即 $foo）设置为 $('#sid').val() 的值？

我对 js 语法不太了解，但我认为它必须是 data: id: $('#sid').val() 因为它需要一个数组