Ajax成功消息不起作用

Question

I want to submit form without refreshing page and display success/error message under form, also in case of success reset form. But I guess, I am doing something wrong in ajax code, php works fine. Ajax:

$("#usignupform").validate({
    submitHandler:function() {
        var $form = $(form),
        $messageSuccess = $('#mesSuccess'),
        $messageError = $('#mesError');
        $.ajax({
            url: "investor-invite.php",
            type: "POST",
            data: $(this).serialize(),
            complete: function(data) {
                if (data.status == 'success') {
                    $messageSuccess.removeClass('hidden');
                    $messageError.addClass('hidden');

                    // Reset Form
                    $form.reset();

                    return;

                } else {
                    $messageError.removeClass('hidden');
                    $messageSuccess.addClass('hidden');
                }
            }
        });
        return false;
    }
});

PHP:

function NewUser(){ 
    $data = mysql_query($query)or die(mysql_error()); 

    if($data){
        $response_array['status'] = 'success';  
    } else {
        $response_array['status'] = 'error';  
    }
}
if(isset($_POST['submit'])){ 
    NewUser();
    }

HTML:

<form>
    --all fields--

    <button type="submit" name="submit" id="submitButton">
    Request Invite</button>
    <div class="alert alert-success hidden" id="mesSuccess">
        <strong>Success!</strong> Your message has been sent to us.
    </div>
    <div class="alert alert-danger hidden" id="mesError">
        <strong>Error!</strong> There was an error sending your message.
    </div>      
</form>

Answer 1

you need to echo content on the php page then this will return success message .Ajax call will get the response if there is html or some printed data in the php file or any target file.

try like this

    function NewUser(){ 
         $data = mysqli_query($query)or die(mysql_error()); 

         if($data){
            $response_array['status'] = 'success';  
               }else {
            $response_array['status'] = 'error';  
          }
return $response_array;
        }
    $data=NewUser();
    echo json_encode($data);

and update the ajax function

$("#usignupform").validate({
                  submitHandler:function() {
                  var $form = $(form),
                   $messageSuccess = $('#mesSuccess'),
                   $messageError = $('#mesError');
             $.ajax({
                   url: "investor-invite.php",
                   type: "POST",
                   data: $(this).serialize(),
                    dataType: 'json',                  //add this to get the json response
                   complete: function(data) {
                        if (data.status == 'success') {

                        $messageSuccess.removeClass('hidden');
                        $messageError.addClass('hidden');

                        // Reset Form
                        $form.reset();


                    return;

                } else {

                    $messageError.removeClass('hidden');
                    $messageSuccess.addClass('hidden');
                }
            }
  });
  return false;
}
});

Update please remove Depricated mysql_* from your code and use mysqli_* or pdo queries

Answer 2

where is the print statement and JSON Header

<?PHP
header('Content-Type: application/json');
echo json_encode($data);

Answer 3

Try This,

 $.ajax({
                type: "post",
                url : "ajax.php",
                dataType: 'json',
                data:{ name : name,claass : claass,mobile : mobile},
                success : function(data){
                    alert("success");
                }
            },"json");

in php,

$arr= ['fname'=>$name,'classs'=>$class,'mobile'=>$mobile];
echo json_encode($arr);

NB : Try With Your post variables. and array variables, I just coppy pasted my code for quick answer !!!!!!

Answer 4

Rather than using complete, use success. and if you want to be able to directly reference the name value pair then you will need to parse the data returned into json as your php currently only sends back the data as a string.

$.ajax({url:'investor-invite.php',
 type:'POST',
 success: function checkData(data){
  dataObj = JSON.parse(data);
  if(dataObj.status == success){
   ...
  }
  else{
   ...
  }
 }
});