使用 AJAX 使用 php 脚本中的 JSON 数据填充表单答案

【问题标题】：Populate form with JSON data from php script using AJAX使用 AJAX 使用 php 脚本中的 JSON 数据填充表单
【发布时间】：2016-03-16 03:06:18
【问题描述】：

我正在使用 AJAX 使用 php 脚本中的 JSON 数据填充表单。当我单击一个按钮时，输入字段正在填充数据，但并非全部都是。就像 JQuery 无法访问整个 DOM，尽管我使用的是“window.onload = function()”。我也尝试过使用“jQuery(document).ready(function()”。我还把我的 Javascript 放在了 html 页面中标签的底部..

这是我的功能：

window.onload = function(){
        $('#button_dossier').click(function(){
            var clickBtnValue = $('#zipsearch').val();
            var ajaxurl = 'fill_form.php',
            data =  {'action': clickBtnValue};
            $.post(ajaxurl, data, function (response) {
                document.getElementById("datum_p").value =response.key;
                document.getElementById("install").value =response.key;
                document.getElementById("adres_t").value =response.key;
                document.getElementById("vp").value =response.key;
                document.getElementById("naam_vp").value =response.key;
                document.getElementById("adres_vp").value =response.key;
                document.getElementById("tel_vp").value =response.key;
                document.getElementById("naam_oz").value =response.key;
                document.getElementById("svc").value =response.key;
                document.getElementById("tel_oz").value =response.key;
                document.getElementById("c1").value =response.key;
                document.getElementById("c2").value =response.key;
                document.getElementById("c3").value =response.key;
                document.getElementById("c").value = response.key;
                document.getElementById("opn").value =response.key;
                document.getElementById("moti").value =response.key;
                document.getElementById("hd").value =response.key;
                document.getElementById("set").value =response.key;
                document.getElementById("ip").value =response.key;
            },'json');
        });
    };

这里出了什么问题？还是功能有限？

提前致谢！

---编辑---

我改变了“响应[];”到“response.key;”。这是我的错误..

【问题讨论】：

你得到了什么response？你应该使用类似 response['key'] 或 response.key 的东西。
document.getElementById("datum_p").value = response[]; - 这根本没有意义。
我更改了脚本。我忘了把我的钥匙加进去。但它仍然不起作用。只有 9 个表单元素被填写。其他都是空的。出于测试目的，我只使用了一个键（命名键），因为我仍然要编写我的 php 脚本。
你真的把同一个对象属性放到所有字段中了吗？
解决了。我用“$(#id).val(response.key);”删除了所有“document.getElementById(id).value = response.key”现在所有的文本字段都被填满了......似乎 getElementById 函数是有限的或什么的。感谢您的帮助！

标签： php jquery ajax forms populate

【解决方案1】：

像这样的线条

 document.getElementById("datum_p").value = response[];

不会有任何效果，因为response[] 是一个 L 值，是array.push(value) 的简写，你的意思可能是

 document.getElementById("datum_p").value = response["datum_p"];

可以缩短为（当您使用 jQuery 时）：

 function setField(key, response) {
     $('#' + key).val(response[key]);
 }

还有：

 $.post(ajaxurl, data, function (response) {
            $("#datum_pl").remove();
            setField("datum_p",response);
            ...
 });

要使其完全通用，您可以迭代响应对象的属性，但这必须对应于 100% 的表单字段。

【讨论】：

我已经更改了我的脚本。我忘了把我的钥匙加进去。但它仍然不起作用。只有 9 个表单元素被填写。其他都是空的。出于测试目的，我只使用了一个键（命名键），因为我仍然要编写我的 php 脚本。
解决了。我用“$(#id).val(response.key);”删除了所有“document.getElementById(id).value = response.key”现在所有的文本字段都被填满了......似乎 getElementById 函数是有限的或什么的。感谢您的帮助！

【解决方案2】：

也许您应该尝试https://github.com/dtuite/jquery.populate 或更高级的http://uic.megaflop.net/download/。它们中的每一个都是一个 jQuery 插件，用于处理从 / 到 html 表单的 javascript/json 数据的序列化/反序列化。

【讨论】：