使用AJAX調用PHP文件

Question

我想在jQuery中使用$ .ajax（）函數調用php文件，但它不起作用。點擊頁面上的按鈕時，下列代碼運行：

if($error === false) { 
     alert($error); 
     $.ajax({ 
      url: '/new-user.php', 
      type: 'POST', 
      data: { 
       name: $('#name').val(), 
       email: $('#name').val(), 
       password: $('#name').val() 
      } 
     }); 

這是我的形式：

<form onClick="return false;" class="reg-form"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="name">First Name</label> 
       <input type="text" id="name" class="form-control" autofocus="autofocus"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="email">Email Address</label> 
       <input type="text" id="email" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password">Password</label> 
       <input type="password" id="password" class="form-control"> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="password-confirm">Confirm Password</label> 
       <input type="password" id="password-confirm" class="form-control"> 
      </div> 
     </div> 
    </div> 

    <button class="btn trans reg-btn">Sign Up</button> 

    <div class="reg-msg"> 
     <span id="password-error-msg">Passwords do not match.</span> 
    </div> 

</form> 

我已經設置窗體的onClick返回false，這樣的形式不重裝當提交頁面時，可以運行jQuery。

任何幫助，非常感謝。

Answer 1

的主要原因，爲什麼人們使用形式是讓你可以（在你的情況下，PHP腳本）定義

行動，

方法（GET或POST）和

提交按鈕捕獲窗體中的所有信息並自動將其發送到服務器。

當您有20-30個輸入或您正在處理多個文件輸入時，這很好。在你的情況，你正在處理你的AJAX功能的數據檢索，你有沒有提交定義按鍵，操作或方法，所以你可以不使用一種形式都使事情更容易....

$.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     dataType: "json", 
     data: { 
      name: $('#name').val(), 
      email: $('#email').val(), 
      password: $('#password').val() 
     } 
    }).done(function(data){ 
      alert(JSON.stringify(data)); 
    }); 

我已經離開了爲簡便起見，格式化的div ...

<input type="text" id="name" class="form-control" autofocus="autofocus"> 
<input type="text" id="email" class="form-control"> 
<input type="password" id="password" class="form-control"> 

上面的代碼將搶在你輸入的數據，將其發送到PHP腳本和輸出是在發回從你的PHP腳本的數據警報。

而且最重要的是你的頁面不會刷新！

Answer 2

請嘗試以下代碼：

$(".reg-btn").click(function(e) 
{ 
    e.preventDefault(); 
    $.ajax({ 
     url: '/new-user.php', 
     type: 'POST', 
     data: { 
      name: $('#name').val(), 
      email: $('#name').val(), 
      password: $('#name').val() 
     }, 
     success:function(response){ 
      //Do something here... 
     } 
    }); 
}); 

請注意，您沒有提交表單按鈕。所以返回false是沒有用的..

Answer 3

我實際上序列化我的表單數據，因爲它代碼少。另外，您可以使用多種形式。例如，你可以有一個隱藏的輸入，其中包含一個任務號碼，並​​有一個PHP腳本來委派任務。或者，您可以使用另一個提交函數變量來傳遞腳本的位置。因此，我提交我的表格，如下所示。

HTML：

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'> 
    <input type='text' name='name'/> 
    <input type='text' name='email'/> 
    <input type='text' name='password'/> 
    <input type='submit'/> 
</form> 

的Javascript：

function submitForm(formId){ 
    var formData = $.(formId).serialize(); 

    $.ajax({ 
     url: '/script.php', 
     type: 'POST', 
     data: formData, 
     success:function(response){ 
      alert(response); 
     } 
    }); 

}