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不工作

回答

相关问题