jQuery Ajax將數據發佈到同一頁面PHP不工作

注意：這是一個jQuery編碼練習，我不允許使用插件或其他模塊。jQuery Ajax將數據發佈到同一頁面PHP不工作

問題：我有一個簡單的表單，我要處理POST表單數據 - 同一頁面處理。

HTML + PHP同一頁上：

<?php 
echo "<pre>"; 
print_r($GLOBALS); 
echo "</pre>"; 
?> 
<head> 
    <title>jQuery Forms</title> 
    <link rel="stylesheet" href="css/global.css"> 
</head> 
<body> 
    <form id="myForm" action=""> 
      <input type="text" placeholder="Email" id="email" name="email"> 
      <span class="error">Email not entered</span><br /> 
      <input type="password" placeholder="Password" id="pword" name="pword"> 
      <span class="error">Password not entered</span><br /> 
      <input type="text" placeholder="First Name" id="fname" name="fname"> 
      <span class="error">First Name not entered</span><br /> 
      <input type="text" placeholder="Last Name" id="lname" name="lname"> 
      <span class="error">Last Name not entered</span><br /> 
      <input type="submit" value="Submit"> 
    </form> 
    <script src="jquery.js"></script> 
    <script src="form.js"></script> 
</body> 
</html>

注：從這裏瞭解如何使用AJAX，我讀了url屬性應留出此相同的頁面處理其他的答案。

jQuery的form.js：

// jQuery form validation 
$(document).ready(function(){ 

    // field mapping 
    var form_fields = { 
     'email' : 'email', 
     'pword' : 'password', 
     'fname' : 'first name', 
     'lname' : 'last name' 
    }; 

    // ajax data 
    var ajaxData = {}; 

    // make sure form fields were entered 
    $('#myForm').on('submit', function(e){ 

     for (var field in form_fields) { 
      if (!$('#' + field).val()) { 
       $('#' + field).next().addClass('error_show'); 
      } else if ($('#' + field).val()) { 
       $('#' + field).next().removeClass('error_show'); 
       ajaxData[field] = $('#' + field).val(); 
      } 
     } 
     console.log(ajaxData) 
     $.ajax({ 
      type : 'POST', 
      data : ajaxData, 
      success : function() { 
       console.log('success'); 
      }, 

      error : function(xhr, status, errorThrown) { 
       console.log('error'); 
      } 
     }); 
     return false; 

    }); 

});

當我在數據鍵入到表單字段作爲所以我得到從以下的jQuery：

ajaxData：Object {email: "[email protected]", pword: "123", fname: "Robert", lname: "Rocha"}

和指示成功消息它是成功的。然而，當我打印全局變量，看看被傳遞到頁面什麼數據他們拿出爲空：

Array 
(
    [_GET] => Array 
     (
     ) 

    [_POST] => Array 
     (
     ) 

    [_COOKIE] => Array 
     (
     ) 

    [_FILES] => Array 
     (
     ) 

    [GLOBALS] => Array 
*RECURSION* 
)

來源

2015-09-19 Robert Rocha

您的代碼工作正常 - 我拉下來，並在本地運行它，它事實上做將示例數據POST到您的服務器。

如果您使用的是Firefox或Chrome（或者其他瀏覽器應該沒問題），您需要打開檢查器/ Firebug並查看您的網絡請求。

您通過http請求發送表單數據，因此您在瀏覽器中打開的實際頁面不會更改或重新加載。相反，如果啓用Show XMLHttpRequests或Log XMLHttpRequests，您將通過網絡面板或當前頁面看到請求。

下面是截圖給你看我的意思：

如果你想擁有它提交回到同一頁面重新加載，你可以更新您的表單提交處理程序做一些事情像這樣：

// make sure form fields were entered 
    $('#myForm').on('submit', function (e) { 

     for (var field in form_fields) { 
      if (!$('#' + field).val()) { 
       $('#' + field).next().addClass('error_show'); 
      } else if ($('#' + field).val()) { 
       $('#' + field).next().removeClass('error_show'); 
       ajaxData[field] = $('#' + field).val(); 
      } 
     } 
     if ($('#myForm').find('.error_show').length) { 
      e.preventDefault(); 
     } 
    });

注意我刪除了AJAX代碼，只是防止形式的，如果它不具有所有正確設置值的提交。

在您當前的html中，這會將它添加到您的頁面URL作爲發佈數據。如果你想真正擁有它送過來的POST方法（推薦），則需要使用該設置來更新您的形式：

<form id="myForm" action="" method="post"> 
...

也會檢出jQuery validate plugin。

來源

2015-09-19 23:42:50 bonesbrigade

謝謝！看着它，你是對的。你知道我如何能做同樣的頁面表單處理使用jQuery和PHP，因爲我張貼上面？ –

當然！我會稍微更新答案。 – bonesbrigade

謝謝。它的工作方式並不是我想到的，我將不得不修改我的代碼。 –

jQuery Ajax將數據發佈到同一頁面PHP不工作

回答

相關問題