如何使用 Jquery Ajax 从服务器端在客户端页面中打印成功消息

Question

我正在使用 jQuery Ajax 发布数据并相应地显示成功消息。 下面是代码：

Javascript

  <script type="text/javascript" 
   src="http://code.jquery.com/jquery-1.3.2.min.js">
</script>
        <script>
            $(document).ready(function() {
                $('form').submit(function(event) { //Trigger on form submit
                    $('#name + .throw_error').empty(); //Clear the messages first
                    $('#success').empty();

                    var postForm = { //Fetch form data
                        "name": $("#name").val(),
                        "element_4_1": $("#element_4_1").val(),
                        "element_4_2": $("#element_4_2").val(),
                        "element_4_3": $("#element_4_3").val(),
                        "email": $("#email").val(),
                        "input4": $("#input4").val(),
                    };

                    $.ajax({ //Process the form using $.ajax()
                        type        : 'POST', //Method type
                        url         : 'contact.php', //Your form processing file url
                        data        : postForm, //Forms name
                        dataType    : 'json',
                        success     : function(data) {
console.log("inside success3") ;
$("#stage").text(data);alert(data);

                        if (!data.success) { //If fails
                            if (data.errors) { //Returned if any error from process.php
                                $('.throw_error').fadeIn(1000).html(data.errors); //Throw relevant error
                                                         console.log("inside failure") ;
                            }
                        } else {
                                                        console.log("inside success") ;
                                $('#stage').fadeIn(1000).append('<p>' + data.posted + '</p>'); 
console.log("inside success2") ;
                            }
                        }
                    });
                    event.preventDefault(); //Prevent the default submit
                });
            });
        </script>

HTML

<form class="contact-form" method="post">


                        <h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked <font color="red">*</font></h4>
                            <label>Name<font color="red">*</font></label><br>
                            <input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/><br>
                            <label>Phone<font color="red">*</font></label><br>


        <span>

            <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"> -

        </span>
        <span>
            <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -

        </span>
        <span>
            <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required >

        </span>

<br><br>
                            <label>Email<font color="red">*</font></label><br>
                            <input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/><br>
                            <label for="input4">Message</label>
                            <textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
                            <p>&nbsp;</p>
                            <button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button">Submit</button>
</form>  

PHP 服务器端

<?php

ini_set('display_errors','On');
 error_reporting(E_ALL);
$errors = array(); 
    $form_data = array(); 
header('Content-type: application/json');
    echo json_encode($form_data);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);

if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.com \n";
$recipient= "test@test.in";



$subject="Online Enquiry   ";


$message="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";


 //send auto-reply
$subject_reply="Thank you for contacting us";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
//mail($email, $subject_reply, $message_reply, $headers);



 //Send Mail
//===========
if(isset($recipient, $subject, $message, $headers)) {
error_log($message);
    $form_data['status'] = 'success';
error_log($form_data['status']);

} else {
    $form_data['status'] = 'error';
error_log($form_data['status']);

} 
}

?>

现在一切正常，但我无法将成功消息从服务器端发送到客户端。如何获得客户端页面中显示的成功消息。在客户端javascript中，当我在警报框中打印数据时，我看到一个空框。如何将数据变量从服务器端传递到客户端。

Answer 1

试试

echo "<script>$('#id or .class').html('error or success message here ');</script>";

Answer 2

PHP 的输出（使用 echo 或 print 或类似方法创建）是您传递给调用 Javascript 的数据。

在您的 PHP 代码中，您在变量 $form_data 中创建一个 emtpy array()，然后使用 echo json_encode($form_data) 输出这个空数组。客户端的结果将是一个空数组，这对我来说并不奇怪。

底线：您在 PHP 中输​​出的所有内容都将在您的 Ajax 调用的成功处理程序中以 data 结尾。