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

单击submit input type时，您需要阻止submit的默认操作，即ajax，以便click进程顺利运行。在e.preventDefault();活动中添加$('#submit_form').on('click', function (e) { //get the e as parameter e.preventDefault(); //rest of your code. });

{{1}}

Answer 2

尝试使用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> ');
       }

    }

   });
});

AJAX-PHP如果验证失败，请保持同一页面

2 个答案: