使用AJAX调用和JSON数据填充表单


Populating form using AJAX call and JSON data

我正在尝试使用AJAX调用一个返回JSON数据的php脚本来填充表单字段。我尝试了两种方法,但都不起作用,我很确定我完全错过了什么。。。我以前从未使用过AJAX,我觉得它很混乱。

  $("#loadDefault").click(function()
  {      
     $.getJSON('formdata.php', {act : 'default'},
     function(data) {
        $.each(data, function(key, value) {
        $('[name='+key+']', frm).val(value);
        })
     });
        /* function populate(frm, data) {
            $.each(data, function(key, value) {
                $('[name='+key+']', frm).val(value);
            });
        }
        populate('#myForm', $.parseJSON(data)); */

    return false;
  });

以下是HTML表单供参考:__________________________________________________

<form id="myForm">
Name: <input type="text" id="name" name="name"> <br>
Postal Code: <input type="text" id="postal" name="postal"> <br>
Phone Number: <input type="text" id="phone" name="phone"> <br>
Address: <input type="text" id="address" name="address"> <br>
<input type="submit">
</form>
<a id="loadDefault" href="">Load Default Data</a> 
<br>

注意:我不是在找人为我写解决方案,我只是希望能得到一些指导或想法,告诉我遗漏了什么或做得不对。谢谢

  1. 您的frm未定义
  2. 此外,frm不需要在$('[name='+key+']', frm).val(value);中,因为您只需要更新字段值

我知道你不想让我写解决方案,但这只是你的方法是正确的。这只是你错过的一些小细节。

基本上,如果您的响应类似于{'name': 'foo', 'postal': 'bar'},那么js应该可以工作。

也许您可以看看这个视图引擎:https://jocapc.github.io/jquery-view-engine/如果JSON对象的属性与表单中的元素匹配,它可以将AJAX响应中的JSON对象直接加载到表单中

  $("#loadDefault").click(function()
  {      
     $.getJSON('formdata.php', {act : 'default', dataType: 'json'},
     function(data) {
        $('#myForm').view(data);
     });
    return false;
  });