通過Ajax將表單數據發佈到php？

下面的形式：

<form onSubmit="return validEmail()" style="text-align:center; clear:both">   
     <input type="text" id="ms_firstName" name="ms_firstName" required placeholder="First Name" style="float:left;" > 
     <input type="text" id="ms_lastName" name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name"> 
     <input type="email" id="ms_email" name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\[email protected]|\[email protected]).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;"> 
     <input type="password" id="ms_password" name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}"> 
     <input type="submit" name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br>  
    </form>

這裏是AJAX：

$.ajax({ 
     url: "/ms_form_handler.php", 
     method:"POST", 
     data: "{'ms_firstName':'" + ms_firstName+ "', 'ms_lastName':'" + ms_lastName+ "', 'ms_email':'" + ms_email+ "', 'ms_password':'" + ms_password+ "'}", 
     success: function(){ 
      alert('form was submitted succesfully'); 
     } 
      });

以下是PHP拿起字段名稱：

if($_POST && isset($_POST['submit'], $_POST['ms_firstName'], $_POST['ms_lastName'], $_POST['ms_email'], $_POST['ms_password']`)){}

任何幫助將是讚賞。

來源

2016-07-27 Yondaime14

如果你有形式爲什麼需要AJAX ，你的頁面不能重新加載？要麼？ –

爲什麼您要手動編碼數據字段？爲什麼不直接通過ajax提交表單，如所有示例中所示？ – arkascha

['serialize（）']（https://api.jquery.com/serialize/）節省了大量的手工編碼。 –

首先，你被傳遞字符串而不是您的data屬性中的對象。你可以只修改代碼如下所示：

HTML表單：：

<form onSubmit="return validEmail()" style="text-align:center; clear:both"> 
     <input type="text"  id="ms_firstName" name="ms_firstName" required placeholder="First Name" style="float:left;" > 
     <input type="text"  id="ms_lastName" name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name"> 
     <input type="email"  id="ms_email"  name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\[email protected]|\[email protected]).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;"> 
     <input type="password" id="ms_password" name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}"> 
     <input type="submit" name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br> 
    </form>

jQuery代碼：：

<script type="text/javascript"> 
     var ms_firstName = $("#ms_firstName").val(); 
     var ms_lastName  = $("#ms_lastName").val(); 
     var ms_email  = $("#ms_email").val(); 
     var ms_password  = $("#ms_password").val(); 
     $.ajax({ 
      url  : "/ms_form_handler.php", 
      method : "POST", 
      data : { // THE data PROPERTY IS EXPECTED TO BE AN OBJECT & YOU PASSED A STRING... 
       ms_firstName : ms_firstName, 
       ms_lastName  : ms_lastName, 
       ms_email  : ms_email, 
       ms_password  : ms_password 
      }, 

      success: function(){ 
       alert('form was submitted succesfully'); 
      } 
     }); 
    </script>

來源

2016-07-27 16:13:43 Poiz

你應該開始使用這種正從表單數據：

EDITED

ms_firstName = $('#ms_firstName').val(); 
ms_lastName = $('#ms_lastName').val(); 
ms_email = $('#ms_email').val(); 
ms_password = $('#ms_password').val();

並用它來發送Ajax請求：

$('form').submit(function(){ 
    $.ajax({ 
    url: "/ms_form_handler.php", 
    method:"POST", 
    data: "{ms_firstName: ms_firstName, ms_lastName: ms_lastName, ms_email: ms_email, ms_password: ms_password}", 
    success: function(){ 
     alert('form was submitted succesfully'); 
    } 
    }); 
});

來源

2016-07-27 16:06:57

您似乎忘記了從輸入對象中獲取值;例如：'ms_firstName = $（'＃ms_firstName'）。val（）;' – Poiz

由於您已經離開了建議，@Poiz不要在沒有足夠時間讓OP進來並自行編輯的情況下編輯答案。 –

通過Ajax將表單數據發佈到php？

回答

相關問題