javascript - AJAX-PHP 如果验证失败则留在同一页面

Question

我使用 ajax 进行了验证检查，它会显示错误。但是，它会显示错误，然后立即转到显示错误的表单发送页面。

该页面非常长 - 因此我将粘贴 ajax 部分的示例。

我应该注意到，这里的所有内容都以编程方式按预期工作 - 唯一问题是它将通过ajax显示错误(正如它应该的那样)，然后在几秒钟后重定向到submit_form.php以纯文本显示的错误消息。

HTML

<form action="submit_form.php" method="post" id="form_1">
   <input type="text" name="text_box" class="form-control" id="text_box" placeholder="Enter Text Here">
   <button type="submit" name="submit_form" id="submit_form" class="btn btn-primary">Submit</button>
</form>

JS

<script>
        $('#submit_form).on('click', function () {
           $.ajax({
               type: "POST",
               url: "submit_form.php",
               dataType: "json",
               data: $('#form_1').serialize(),
               success: function (json) {
             $('.message_center').html('');
                   if(json['success']) {
               $('.message_center').html('<div class="row">'+
                                        '   <div class="col-md-12">'+
                                        '     <div class="alert alert-success alert-dismissible">'+
                                        '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
                                        '       <h4><i class="icon fa fa-check"></i> Success!</h4>'+
                                        '       '+json['success']+''+
                                        '     </div>'+
                                        '   </div>'+
                                        ' </div> ');
             }
             if(json['error']) {
               var html='';
               $.each( json['error'], function( key, value ) {
                html += value+'<br>';
              });
              $('.message_center').html('<div class="row">'+
                                              '   <div class="col-md-12">'+
                                              '     <div class="alert alert-warning alert-dismissible">'+
                                              '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
                                              '       <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
                                              '       '+html+''+
                                              '     </div>'+
                                              '   </div>'+
                                              ' </div> ');
             }

               }

           });
       });
    </script>

SUBMIT_FORM.PHP

<?php session_start();

$json = array(); 

if ($_POST['text_box'] === NULL) {
  $json['error'][] = "Please enter data in textbox.";
} else {
  $textData = $_POST['text_box'];
}

if($json){ // If any Errors, return else, insert data into database.

    echo json_encode($json);
    exit;

} else {

    // insert query that works is here.


echo json_encode($json);
exit;

} 


?>

Answer 1

尝试使用 addEventListener，然后在出现错误时调用 event.preventDefault() 来阻止表单提交，如下所示:

$('#submit_form').addEventListener('click', function (event) {

// Prevents form from submitting
             event.preventDefault();

   $.ajax({
       type: "POST",
       url: "submit_form.php",
       dataType: "json",
       data: $('#form_1').serialize(),
       success: function (json) {
        $('.message_center').html('');

        if(json['success']) {

         $('.message_center')
          .html('<div class="row">'+
            '   <div class="col-md-12">'+
            '     <div class="alert alert-success alert-dismissible">'+
            '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
            '       <h4><i class="icon fa fa-check"></i> Success!</h4>'+
            '       '+json['success']+''+
            '     </div>'+
            '   </div>'+
            ' </div> ');
       }

       if(json['error']) {

         var html='';
         $.each( json['error'], function( key, value ) {
          html += value+'<br>';
        });
        $('.message_center')
          .html('<div class="row">'+
            '   <div class="col-md-12">'+
            '     <div class="alert alert-warning alert-dismissible">'+
            '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
            '       <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
            '       '+html+''+
            '     </div>'+
            '   </div>'+
            ' </div> ');
       }

    }

   });
});