【问题标题】：PHP: Problem submitting form in AJAX/JSON?PHP：在 AJAX/JSON 中提交表单时出现问题？
【发布时间】：2010-08-17 19:38:37
【问题描述】：

目前我有以下代码：

home.php

<form name='myformname' id='myformid'>
    <input type='text' name='mytext1' value='abc'>
    <input type='text' name='mytext2' value='123'>
    <input type='submit' value='Submit'> 
</form>

<div id='textone'></div><div id='texttwo'></div>

_home.php

$arr = array( 'textone' => $_POST['mytext1'], 'texttwo' => $_POST['mytext2'] );
echo json_encode( $arr );

ajax.js

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        data: $('#myformid').serialize(),
        success: function( data ) {
            // TODO: write code here to get json data and load DIVs instead of alert
            alert(data);
        }
    });
    return false;
});

提交时的输出：

{"textone":"abc","texttwo":"123"}

问题

我想在 textone DIV 中加载 mytext1 值，在 texttwo DIV 中使用 json 数据加载 mytext2 值_home.php

提示：我正在使用this answer 对链接点击事件执行相同的任务。但是如何在表单提交时做到这一点？

谢谢

【问题讨论】：

试试：alert(data['textone']);
@sarfraz：它被硬编码为一个 div。我想要使用 json 数据循环所有 DIV。

标签： php jquery ajax json

【解决方案1】：

您只想解析该 JSON 并将 div 设置为它包含的值，对吗？

var divs = JSON.parse(data);
for (var div in divs) {
  document.getElementById(div).innerHTML = divs[div];
}

（上一张海报的语法可能更像你所追求的，也许更兼容跨浏览器，但不包括 JSON 解析。）

由于 JSON 只是 JavaScript 的一个子集，因此您只需 eval() 它即可。 JSON.parse() 基本上是这样做的，但可以保证如果“数据”包含一些讨厌的代码而不是简单的对象，它将不会被评估。

【讨论】：

我也在这里回答了完整的解决方案。
如果响应中的Content-type头设置为application/json，jQuery会在传递给成功函数的数据参数中自动解析。

【解决方案2】：

在成功函数中

for (prop in data){
    $('#' + prop).html(data[prop]);
}

【讨论】：

【解决方案3】：

这是我完整的 JS 解决方案：

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        dataType: 'json',
        data: $('#myformid').serialize(),
        success: function( data ) {
            for(var id in data) {
                //jQuery('#' + id).html(data[id]); // This will also work
                document.getElementById(id).innerHTML = data[id];
            }
        }
    });
    return false;
});

【讨论】：