通过 JSON/Ajax 从 PHP 返回值答案

【问题标题】：Return value from PHP through JSON/Ajax通过 JSON/Ajax 从 PHP 返回值
【发布时间】：2011-04-25 02:42:42
【问题描述】：

我目前正在开发一个 PHP CMS，并且在 CSS 和 AJAX 之间陷入了困境。我想弄清楚的问题是如何让 AJAX/JSON 和 PHP 返回可以填充到表单中的值。

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

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

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

首先……这可能吗？

其次...如果是的话，您能否为我指出正确的程序流向，或者我可以学习的示例脚本。

提前致谢。

【问题讨论】：

标签： php ajax json

【解决方案1】：

是的，可能而且实施起来并不难。假设您的 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

注意，您的脚本将取决于您将数据推送到的元素（例如示例中输入文本、文本区域和选择之间的差异）。

【讨论】：

感谢两位的帮助。我在您的帮助下整理了一些东西，并且在所有最新的浏览器版本中都可以正常工作。

【解决方案2】：

解决方案很简单：

将所有 onload/domready 功能存储在一个新函数中（pimpHTML 或其他）。
onload/ondomready 运行它 > 复选框等样式
在每次 dom 更改后运行它（半自动）

.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);
});

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

【讨论】：