如何使用 jQuery 和 PHP 在单独的行上显示 JSON 响应答案

【问题标题】：How to display a JSON response on separate lines using jQuery and PHP如何使用 jQuery 和 PHP 在单独的行上显示 JSON 响应
【发布时间】：2011-04-27 19:53:49
【问题描述】：

我正在使用 AJAX 提交表单，并希望在页面上显示信息摘要，以便用户在提交前确认信息。我无法将结果显示在多行上。关于最好的方法有什么建议吗？

这里是 PHP：

$return['message'] = 'First Entry: ' . $_POST['Name1'] . ' '  . 'Second Entry: ' .    $_POST['Name2'] . ' ' . 'Third Entry: ' . $_POST['Name3'];  

echo json_encode($return);

这里是 jQuery：

$("#mark-form").validate({
    submitHandler: function(form) {
            $(form).ajaxSubmit({                  
                type: "POST",
                data: {
                    "Name1" : $('#Name1').val(),
                    "Name2" : $('#Name2').val(),
                    "Name3" : $('#Name3').val()
                       },
                dataType: 'json',
                url: './includes/ajaxtest3.php',
                error: function() {alert("Error");},
                success: 
                function(data) {
                    $('<div id="output2"></div>').insertAfter($('#agreement-information'));
                    $('#output2').html(data.message).show(500);
                    $('#ouput2').append(data);  
                },       
  });

return false;   
   },
        errorPlacement: function(error,element) {
                        return true;
                },
        rules: {
            "Name1": {
                required: true,
                }
        }       
});

【问题讨论】：

标签： php jquery ajax json

【解决方案1】：

您可以像这样传输 JSON 编码的 HTML 换行符：

$return['message'] = 'First Entry: ' . $_POST['Name1'] . '<br /> '  . 'Second Entry: ' .    $_POST['Name2'] . '<br /> ' . 'Third Entry: ' . $_POST['Name3'];  
echo json_encode($return);

或者将换行符 (\n) 转换为换行符标签。

不过，更好的方法是将这种处理留给客户端，例如返回消息数组：

$return['message'] = array();
$return['message'][] = 'First Entry: ' . $_POST['Name1'];
$return['message'][] = 'Second Entry: ' . $_POST['Name2'];
$return['message'][] = 'Third Entry: ' . $_POST['Name3'];
echo json_encode($return);

并将处理留给客户端（也许客户端希望稍后将消息包装在段落标签中）：

function(data)
{
    $('<div id="output2"></div>').insertAfter($('#agreement-information'));
    $('#output2').html(data.message.join('<br />')).show(500);
    $('#ouput2').append(data);  
}

【讨论】：

【解决方案2】：

通常你想在数组上使用json_encode。所以你的 PHP 数组看起来像：

$arr = array('foo' => 1, 'bar' => 2, 'baz' => 'test');
// you can probably just use $_POST here, i.e. $arr = $_POST

echo json_encode($arr);

您的 JavaScript 处理该 data 变量将如下所示：

$('#id').html(data.foo + "<br />" + data.bar + "<br />" + data.baz);

这让您可以分段处理数据，而不是一次性处理，因此更容易操作和解析。

【讨论】：

【解决方案3】：

你需要插入<br />标签或者插入\n然后将内容放入pre标签中。请记住，您正在将此内容注入到 html DOM 中，因此 html 规则仍然适用 :-)

【讨论】：

【解决方案4】：

$return['message'] = 'First Entry: ' . $_POST['Name1'] . '<br />'  . 'Second Entry: ' .    $_POST['Name2'] . '<br />' . 'Third Entry: ' . $_POST['Name3'];

【讨论】：