jQuery 驗證 submitHandler 在 $.ajax 發布表單數據中不起作用

Question

我正在使用 jquery 驗證插件將數據從表單發送到 mysql 數據庫。 驗證工作正常，但單擊按鈕后，數據未提交到數據庫。 但沒有響應或錯誤生成。 我認為錯誤出在ajax部分。

下面的文件是 db_connect.php，它執行。兩個 echo 都在工作

<?php

echo "hello";
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "upscfpyl_test";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    echo "hi";
    //exit();
}
else{
    echo "hi2";
}
?>       

index.html - 顯示了 div 錯誤下方給出的一些代碼，但其中的內容是 hi2。 我不知道為什么它的內容是 hi2。 我用過 echo "hi2"; 在 db_connect.php [最后給出的代碼] 但沒有將其返回給 ajax。

<div id="error"></div>
<form id="signupForm" method="post" action="#">
<input type="submit" class="btn btn-primary" value="Sign Up" id="button1" name="btn-save">
</form>

阿賈克斯部分：

$.ajax({
    type: 'POST',
    dataType: 'text',
    url: 'js/php/register.php',
    data: {
        name1: name,
        email1: email,
        mobile1: mobile,
        gender1: gender,
        password1: passwords
    },
    beforeSend: function() {
        $("#error").fadeOut();
        document.getElementById("button1").disabled = true; // this works
    },
    success : function(response) {
        if(response==1)
        {
            $("#error").fadeIn(1000, function()
            {
                $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>   Sorry email already taken !</div>');
                document.getElementById("button1").disabled = false;
            });
        } 
        else if(response=="registered")
        {
            window.location = "dashboard.html";
        } 
        else {
            $("#error").fadeIn(1000, function()
            {
                $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span>   '+response+' !</div>');
                document.getElementById("button1").disabled = false;
            });
        }
    }
});

register.php - 提交到數據庫

<?php
include_once("db_connect.php");


function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}


if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name=test_input($_POST['name1']); // Fetching Values from URL.
  $email=test_input($_POST['email1']);
  $gender=test_input($_POST['gender1']);
  $mobile=test_input($_POST['mobile1']);
  $password= test_input(sha1($_POST['password1'])); // Password Encryption, If you like you can also leave sha1.

echo "pranav";    // these dont work
echo $name+$email+$gender; // this also doesnt work


  // Check if e-mail address syntax is valid or not
  $email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing email(Remove unexpected symbol like <,>,?,#,!, etc.)
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
    echo $email;
  } 
  else{
    $result = mysql_query("SELECT * FROM users WHERE email='$email'");
    $data = mysql_num_rows($result);
    if(($data)==0){
      $query = mysql_query("insert into users(name, email, password, gender, mobile) values ('$name', '$email', '$password', '$gender', '$mobile')"); // Insert query
      if($query){
        echo "registered";
      }
      else
      {
        echo "Error....!!";
      }
    }
    else
    {
      echo "1";
    }
  }
}
?>  

    

Answer 1

您可以打開瀏覽器控制台來檢查日志。

如果 dataType 是 JSON，則意味着您的服務器正在返回一個 json。 但事實並非如此，請參閱https://api.jquery.com/jQuery.ajax/

嘗試使用此代碼進行數據序列化：

$("#your_form_id").submit(function(e){ 
    e.preventDefault(); 
    var datas = $(this).serialize(); 
    $.ajax({

        data: datas,
        // Or this
        data: 'key1=' + value1 + '&key2=' + value2 + '&key3=' + value3,

        // to match your server response
        dataType: "text"

        // Error warning
        .fail(function() {
           alert( "error" );
        })

    });
});

有了表單的驗證碼，我們可以更好地幫助您