jQuery Ajax将数据发布到同一页面PHP无法正常工作

Question

注意：这是jQuery编码练习，不允许使用插件或其他模块。

问题：我有一个想要处理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: "robert@stackoverflow.com", pword: "123", fname: "Robert", lname: "Rocha"}

和一条成功消息，表明它已成功。 但是，当我打印GLOBAL变量以查看将什么数据传递到页面时，它们显示为空：

Array
(
    [_GET] => Array
        (
        )

    [_POST] => Array
        (
        )

    [_COOKIE] => Array
        (
        )

    [_FILES] => Array
        (
        )

    [GLOBALS] => Array
 *RECURSION*
)

Answer 1

您的代码运行良好-我将其拉下并在本地运行，实际上它会将示例数据发布到您的服务器上。

如果您使用的是Firefox或Chrome（或者实际上任何浏览器都可以），则需要打开检查器/ Firebug并查看您的网络请求。

您是通过http请求发送表单数据的，因此您在浏览器中打开的实际页面不会更改或重新加载。 相反，如果启用了Show XMLHttpRequests或Log XMLHttpRequests则将通过“网络”面板或在JavaScript控制台中看到从当前页面发出的请求。

这是一个截图，向您展示我的意思：

如果要通过重新加载将其提交回同一页面，则可以更新表单提交处理程序以执行以下操作：

// 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插件。

jQuery Ajax将数据发布到同一页面PHP无法正常工作

问题描述

1 个解决方案

解决方案1
1 2015-09-19 23:42:50

jQuery Ajax将数据发布到同一页面PHP无法正常工作

问题描述

1 个解决方案

解决方案1 1 2015-09-19 23:42:50

解决方案1
1 2015-09-19 23:42:50