Question

我目前在PHP CMS上工作，陷入了摇滚和硬盘之间，那些是CSS和AJAX。我想弄清楚的问题是如何让AJAX / JSON和PHP返回可以填充到表单中的值。

在我的一个页面上，我有一个带有选择列表的表单。当用户从列表中选择一个选项时，AJAX脚本从PHP文件请求响应，该文件将结果输出回浏览器。这工作正常。

然而，Jquery / CSS不会在返回的结果中设置特定元素，例如复选框。

我想要做的是向用户显示一个表单，其顶部是选择菜单，下面是空输入字段。当他们从菜单中选择一个选项时，下面的表单字段将填充返回数据。表单本身由文本字段，文本区域和选择列表组成，我希望每个表单都更新其值以匹配相应的返回数据。

首先......这可能吗？

其次......如果是的话，你能指出我关于程序语法流程的正确方向，或者我可以研究的示例剧本。

提前致谢。

Answer 1

解决方案很简单：

将所有onload / domready功能存储在新功能（pimpHTML或其他内容）中。
运行onload / ondomready＆gt;复选框等样式
在每次dom更改后（半自动）运行它

0.3。不是那么难。只需创建一个函数setHtml(obj, html)（或其他东西），将响应HTML插入节点，然后重做pimpHTML

准备：

function pimpHTML() {
  // checkboxes
  // radiobuttons
  // ajax links
  // etc
}
$(pimpHTML); // or $(documemt).ready(pimpHTML);
function setHtml(obj, html) {
  obj.html(html);
  pimpHTML();
}

半直列：

var obj = ...; // form or messagebox or something
$.post('/', function(rsp) {
  setHtml(obj, rsp);
});

显然它不是这样做的，你必须自己改进并指定它。

Answer 2

是的，可能而且非常难以实施。假设您的HTML看起来像这样（这显然是丑陋的;））：

<select id="update">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>    
</select>
<form action="#" method="POST">
    <label for="txt">Text:</label><input type="text" id="txt"/><br/>
    <label for="sel">Select:</label><select id="sel"></select><br/>
    <label for="txta">TextArea:</label><textarea id="txta"></textarea><br/>
</form>

您可以编写一个快速的jQuery ajax请求，在success响应中填充表单数据，如下所示：

$(document).ready(function(){
    $('#update').change(function(){
        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            data: {
                'json': $('#update').val()
                  },
            success: function(data){
                $('#txt').val(data);
                $('#sel option').remove();
                $('#sel').append($('<option></option>').attr('value', data).text(data));
                $('#txta').val(data);
            }
        });
    });
});

<强> Fiddle here

注意您的脚本将依赖于您正在推送数据的元素（例如输入文本，textarea和示例中的select之间的差异）。

从PHP返回JSON / Ajax的值

2 个答案: