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

Question

I am using AJAX to submit a form, and would like to display a summary of the information on the page so that the user can confirm the information before submitting. I am having trouble getting the results to display on multiple lines. Any suggestions on the best way to do this?

Here is the PHP:

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

echo json_encode($return);

Here is the 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,
                }
        }       
});

Answer 1

You can transfer JSON encoded HTML newlines like this:

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

Or convert newlines ( ) into newline tags.

The nicer way though would be to leave that kind of processing to the client by e.g. returning an array of messages:

$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);

And leave the processing to the client (maybe the client wants the messages wrapped in a paragraph tag later on):

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