jQuery Ajax无法与$ .ajax（）一起使用

Question

我正在尝试用于获取数据并通过jQuery显示它。 这是我的剧本

<script>
    $("#kys_SignUp_form").submit(function(event){
    event.preventDefault();

    var $form = $(this);
    var $url = $form.attr('action');
    var $email = $("#email").val();
    var $username = $("#username").val();
    var $password = $("#password").val();

    $.ajax({
          type: 'POST',
          url: $url,
          data: { email: $email, password: $password, username: $username },

          success: function(data) {
                alert("Transaction Completed!");
           }

            });
    });

 </script>

这是我的表格：

 <form role="form" action="kys_SignUp.php" method="post" id="kys_SignUp_form">
   <div class="form-group">
       <label for="email" >Email address:</label>
       <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
    </div>

  <div class="form-group">
    <label for="Username" >Username:</label>
    <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
   </div>

  <div class="form-group">
     <label for="password" >Password:</label>
     <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
  </div>

   <button type="submit"  class="btn btn-default">Submit</button>

</form>

我是jQuery新手。 我面临的问题是即使使用ajax之后，页面也被重定向到php文件，我认为根本没有调用ajax函数。

这是我的php文件：

 <?php 

 include "kys_DbConnect.php";

 $email = $username = $password = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);        
}

$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
         echo "Username or Email already exists";         
    }  
   else{

        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param("sss",$username,$email,$password);
        $insert->execute();
         header("Location: http://localhost/KeyStroke/index.html");
        exit();

   }
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
?>

我无法找出我的代码出了什么问题。

Answer 1

更新尝试：

<form role="form" action="kys_SignUp.php" method="post" id="kys_SignUp_form">
    <div class="form-group">
        <label for="email" >Email address:</label>
        <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
    </div>

    <div class="form-group">
        <label for="Username" >Username:</label>
        <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
    </div>

    <div class="form-group">
        <label for="password" >Password:</label>
        <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
    </div>

    <button id="submit_btn"  class="btn btn-default">Submit</button>

</form>

更新2：

<script>

      $(function() {
             // Handler for .ready() called.
             $("#submit_btn").on('click',function(event){
         //alert is not being called at all . That means .submit() is never beign called
               alert("hello there");
              event.preventDefault();

              var form = $('#kys_SignUp_form'); //changed from $(this)
              var url = form.attr('action');
              var email = $("#email").val();
              var username = $("#username").val();
              var password = $("#password").val();


                 $.ajax({
                      type: 'POST',
                      url: url,
                      dataType:"json", //<-- add this
                      data: { email: email, password: password, username: username },

                     success: function(data) {
                               if(data.success){
                            window.location.href=data.result;
                          }else {
                            alert("ERROR. "+data.result);
                             }

                             }

                 });

          });



    });
</script>

并在您的PHP代码中

 <?php 

 include "kys_DbConnect.php";

 $email = $username = $password = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);        
}

$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
         echo json_encode(array("success"=>false,"result"=>"Username or Email already exists"));         
    }  
   else{

        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param("sss",$username,$email,$password);
        $insert->execute();
        echo json_encode(array("success"=>true,"result"=>"http://localhost/KeyStroke/index.html"));

   }
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
?>

Answer 2

<script>

$("#clickbutton").click(function(){


var $url = 'kys_SignUp.php';
var $email = $("#email").val();
var $username = $("#Username").val();
var $password = $("#password").val();


$.ajax({
type: 'POST',
url: $url,
data: 'email='+$email+'&password='+$password+'&username='+$username,

success: function(data) {
alert("Transaction Completed!");

}

});

});
</script>

并删除表单中的操作并更改“提交”按钮

<button type="button" id="clickbutton"  class="btn btn-default">Submit</button>

Answer 3

试试这个功能：

<script>

      $(function() {

             $('#kys_SignUp_form button[type="submit"]').on('click',function(event){

               alert("hello there");
              event.preventDefault();

              var form =  $("#kys_SignUp_form");//note here we select the form element to get the url
              var url = form.attr('action');
              var email = form.find("#email").val();
              var username = form.find("#username").val();
              var password = form.find("#password").val();


                 $.ajax({
                      type: 'POST',
                      url: url,
                      dataType:"json", 
                      data: { email: email, password: password, username: username },

                     success: function(data) {
                       if(data.message == "Success") {
                            window.location ='http://localhost/KeyStroke/index.html';
                       } else {alert(data.message)}

                 });

          });



    });
</script>

PHP：

 include "kys_DbConnect.php";
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
function isUser($username,$email)
$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
       return true;      
    }
}  
function inserNewUser($username,$email,$password)
        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param($username,$email,$password);
        $insert->execute();

   }


if($_SERVER["REQUEST_METHOD"] == "POST"){
    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);  
    if (isUser($username,$email)) {
      echo json_encode(['message'=>'Username or Email already exists'])
    } else {
      inserNewUser($username,$email,$password);
      echo json_encode(['message'=>'Success']);
    }

} else {
echo json_encode(['message'=>'Error get method not allowed'])
}

Answer 4

为什么在js变量中使用$ ，这是错误的。

使用这个。

var form = $(this);  
var url = $form.attr('action');  
var email = $("#email").val();  
var username = $("#username").val();  
var password = $("#password").val();

Answer 5

看看我的方式，可能会对您有所帮助。

$('#frmReportWithparams').submit(function () {        
    $.ajax({
        url: "@Url.Content("~/LeftMenu/SendReportWithParameter")",
        type: "POST",
        data: $('#frmReportWithparams').serialize(),
        success: function (result) {
            if (result.IsSuccess == true) {
                alert("Thank You.")
                $('#modalHomeIndex').dialog('close')
            }
            else {
                alert("'Error Occurs.Try Later.")
                $('#modalHomeIndex').dialog('close')
            }
        }
    })
    return false;
})

实际上，代码是针对C＃的，但是我只是设置了在Ajax中发布表单的位置。
看看@ Url.content，我在其中传递了将要发布表单的值。 并且参数在数据字段中序列化。
如果您还有其他疑问，请进一步询问...

Answer 6

尝试这可能会起作用

<script> 
$(document ).ready(function() { 
    $('#kys_SignUp_form').on('submit', function(e) {
      e.preventDefault();
    });
});

 // ================ SUBMIT  =====================
$('#kys_SignUp_form .form_submit').on('click', function(e){
    e.preventDefault();
    var $form = $(this);      
    var $email = $("#email").val();
    var $username = $("#username").val();
    var $password = $("#password").val();

    $.ajax({
        type: 'POST',
        url: 'kys_SignUp.php',
        dataType: 'json',
        data: { email: $email, password: $password, username: $username },
        success: function(data) {
            alert("Transaction Completed!");
        },
       error : function( errorThrown) {

         alert('errorThrown ' + errorThrown);
      }
    });
});
</script>

HTML

<form role="form"  method="post" id="kys_SignUp_form">
<div class="form-group">
    <label for="email" >Email address:</label>
    <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
</div>

<div class="form-group">
    <label for="Username" >Username:</label>
    <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
</div>

<div class="form-group">
    <label for="password" >Password:</label>
    <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
</div>

<button type="submit"  class="btn btn-default form_submit">Submit</button>

Answer 7

您需要做两件事。

1-更改var var url = $ form.attr（'action'）; 至

var url = $("#kys_SignUp_form").attr('action');

2-在提交函数结束之前添加return语句

完整的脚本如下所示-

<script>
  $( document ).ready(function() {
         // Handler for .ready() called.
         $("#kys_SignUp_form").submit(function(event){

          alert("hello there");
          event.preventDefault();
          var form = $(this);
          var url = $("#kys_SignUp_form").attr('action');
          var email = $("#email").val();
          var username = $("#username").val();
          var password = $("#password").val();

          $.ajax({
                  type: 'POST',
                  url: url,
                  data: { email: email, password: password, username: username },

                 success: function(data) {
                           alert("Transaction Completed!");

                         }
             });
        return false;
      });
});
</script>