Ajax 表单提交在第一次提交时返回错误,但在第二次单击时提交

Posted

技术标签:

【中文标题】Ajax 表单提交在第一次提交时返回错误,但在第二次单击时提交【英文标题】:Ajax form submit returns error on first submit but submits on second click 【发布时间】:2017-07-27 03:42:34 【问题描述】:

我正在尝试使用 ajax 表单提交来提交表单而不刷新页面。但是,当我第一次单击提交按钮时,它会警告错误(在警告中它显示了我有提交表单的整个 html 页面)。如果我关闭警报并再次点击相同的提交按钮而不刷新页面,它会完美地提交表单。

因此,每次刷新页面时,我都必须点击提交按钮,然后关闭错误警报,然后再次提交。我很确定它在 ajax 文件中有一些语法错误。

$('document').ready(function() 
  /* validation */
  $("#login-form").validate(
    rules: 
      upass: 
        required: true
      ,
      uemail: 
        required: true,
        email: true
      ,
    ,
    messages: 
      upass: 
        required: "please enter your password"
      ,
      uemail: "please enter your email address",
    ,
    errorPlacement: function(error, element) 
      $(element).closest('.form-group').find('.help-block').html(error.html());
    ,
    highlight: function(element) 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    ,
    submitHandler: submitForm
  );
  /* validation */

  /* login submit */
  function submitForm() 
    var data = $("#login-form").serialize();

    $.ajax(

      type: 'POST',
      url: 'login.php',
      data: data,
      dataType: 'json',
      success: function(data) 
        // console.log(data);
        // alert(JSON.stringify(response));
        // if(response == 1)
        if (data.status == 'success') 
          // alert('Good!');
          alert(JSON.stringify(data));
          window.location.href = "home.php";
         else 
          window.location.href = "login_failed.php";
        
      ,
      error: function(data) 
        // console.log(JSON.stringify(data));
        alert(JSON.stringify(data));
      
    );
    return false;
  

);

HTML 文件

<!DOCTYPE HTML>
<html>
  <head>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link rel="stylesheet" href="assets/signup-form.css" type="text/css" />

  </head>
  <body>
  <!--container starts-->
  <div class="container">


      <!--Header starts-->
            <nav class="navbar navbar-fixed-top">
              <div class="container-fluid">
        <div class="logo">
        <a href="index.php"><img src="images/logo.png" style="float:left"/></a>
        </div>


        <form method="post" action="login.php" id="login-form" class="form-inline" autocomplete="off">

        <div class="form-group"><strong style="color:white; font-family:tahoma">Email:</strong>
        <input type="email" class="form-control" placeholder="Email address" name="uemail" id="user_email" />

        </div>



          <!--<input type="email" name="uemail" placeholder="Email" required/>-->
          <!--<input type="email" name="u_email" placeholder="Email" required="required"/>-->

        <div class="form-group"><strong style="color:white; font-family:tahoma">Password:</strong>
        <input type="password" class="form-control" placeholder="Password" name="upass" />

        </div>


          <!--<input type="password" name="upass" placeholder="Password" required/>-->
          <!--<input type="password" name="u_pass" placeholder="********" required="required"/>-->
          <button type="submit" name="login" class="btn btn-default">Login</button></br>
          <!--<button type="submit" name="login"> Login </button>-->

          <a href="forgot_password.php">Forgot your password?</a>
        </form>
              </div>
            </nav>



  <script src="js_files/login.js"></script>
  <!-- <script src="js_files/login_failed.js"></script> -->
  <!-- <script src="register_script.js"></script> -->
  <script src="js_files/sign_up.js"></script>

  </body>
</html>

这是 php 文件 login.php

<?php

require_once 'class/head.class.php';

if(isset($_POST['login'])) 

    $u_email = $_POST['uemail'];
    $u_pass = $_POST['upass'];


    try 

        if(init::loginCheck($u_email) < 3)
            if(users::login($u_email, $u_pass)) 
                init::loginSuccess($u_email);
                // init::redirect('home.php');

                $response['status'] = 'success';
                // $response['message'] = '<div class="alert alert-danger"><span class="glyphicon glyphicon-ok"></span> &nbsp; registered sucessfully, please confirm your email</div>';
                // echo 1;
             else 
                init::loginAttempt($u_email);

                // init::redirect('home.php');

                $response['status'] = 'redirect'; // could not register

                // $response['message'] = '<div class="alert alert-warning"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; You have entered incorrect login details. Please try again</div>';
                // echo 0;
            
        
        else 

            $response['status'] = 'redirect';

        

    
    catch(PDOException $e) 
        echo $e->getMessage();
    

echo json_encode($response);



?>

它返回的错误是包含表单的html页面:

"readyState":4,"responseText":"\n\n \n\n\n\nhttps://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min。 js\">\n \n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\" 完整性=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"匿名\">\n\n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" 完整性=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin= \"匿名\">\n\n\nhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css\" 完整性=\"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp\" 跨域=\"匿名\">\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n电子邮件:\ n \n \n \n\n\n \n -->\n -->\n\n 密码:\n \n\n \n\n \n -->\n -->\n 登录\n 登录 -->\n\n 忘记密码?\n \n \n \n\n \n\n \n -->\n -->\n \n\n \n","status":200,"statusText":"OK"

【问题讨论】:

有我们可以看到的任何 html 吗? 它返回什么错误? 表格的代码.. @Rick 。我已经添加了 html 和 php 代码。谢谢 @santoshgore 。我添加了它显示的错误。谢谢 【参考方案1】:

将此添加到您的 ajax 请求中

async: false,

这将修复您的错误并添加它以查看来自 ajax 请求的任何错误

error: function(er, err, error)
  alert(error);
;

【讨论】:

以上是关于Ajax 表单提交在第一次提交时返回错误,但在第二次单击时提交的主要内容,如果未能解决你的问题,请参考以下文章

PHP表单提交失败,如何返回原值?

由于 Spring MVC 中不存在 URL,验证表单提交按钮在第二次尝试后返回 404

Laravel csrf 令牌在 ajax 上第二次不匹配

jQuery - 更改 iframe src 时仅在第二次单击时触发

返回按钮到上一个局部视图

for循环提交ajax,为啥只有第一次能够提交,后面的循环都没有提交到后台,但是for执行完了?急急急!