jQuery Ajax 不从外部 PHP 返回变量

Question

我有这段代码，它从表单中获取信息并将其发送到 form.php 进行处理。 form.php 回显应该输入到#success 的变量（全名：$fullname 电子邮件：$email 链接：$link 说明：$instr）。我的代码在 Firefox 和 Chrome 中有两种不同的行为方式。

在 Firefox 中，我被发送到 form.php，它会正确显示输出，但显然我不应该被发送到那里，我应该留在我的主页上并在 #success 中看到该输出。基本上，ajax 不起作用。

在 Chrome 中，ajax 确实可以工作，但只能将全名：电子邮件：链接：说明：拉入#success。本质上，jQuery 并不是通过 POST 传递变量。

mainpage.php:

<script type="text/javascript">
$(document).ready(function() {
    var data = $(form).serialize();
    $('#form').submit(function(event) {   
            $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
            }); 
     event.preventDefault();
     });
})
</script>

<div id="exchange_inside">
<div id="formdiv">
<br>
<form method="post" id="form">
    Name / Nom:<input type="text" name="fullname" /><br />
    E-mail / Courriel:<input type="text" name="email" /><br />                          Your Daily URL / Votre URL Quotidien:<input type="text" name="link" /><br />
    Voting Instructions / Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br />
    <input type="submit" value="Submit" />
</form>
</div>
</div>
<div id="success">
</div>

表单.php:

<?php
if (isset($_POST['fullname'])){
    $fullname = $_POST['fullname'];   
}else{
    echo "No name";
}

if (isset($_POST['email'])){
    $email = $_POST['email'];   
}else{
    echo "No email";
}

if (isset($_POST['link'])){
    $link = $_POST['link'];   
}else{
    echo "No link";
}

if (isset($_POST['instr'])){
    $instr = $_POST['instr'];   
}else{
    echo "No instructions";
}

echo "Name: " .$fullname. " E-mail: " .$email. " Link: " .$link. " Instructions: " .$instr;
?>

Answer 1

尝试通过将 event.preventDefault(); 移至 ajax 调用之前稍微更改一下 jquery 并修复 var data = $("#form" ).serialize();：

$(document).ready(function() {

    $('#form').submit(function(event) { 
        event.preventDefault();  
        var data = $("#form").serialize();
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 

 });
}); //semicolon here

在 $(document).ready 末尾添加分号以方便衡量。

如果 ajax 由于某种原因失败或在 ajax 调用中出现错误，则在 ajax 调用之前移动 event.preventDefault() 会阻止表单提交。 ajax 调用。主要是使用这种表单提交方法，您需要首先停止表单的默认行为。

Answer 2

尝试去掉 $('#form').submit，它在不使用 ajax 的情况下提交表单，如下所示：

$(document).ready(function() {
    var data = $('#form').serialize(); //this selector also needed to be fixed 
    $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
    }); 
});

编辑：
我误会了。尝试在按下提交后序列化数据，而不是在页面加载时序列化数据，以解决 Chrome 问题。

$('#form').submit(function(event) {   
        var data = $('#form').serialize(); //moved this line and fixed selector
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 
        event.preventDefault();
 });

您可能还想尝试将提交按钮更改为常规按钮并将 ajax 绑定到其 onclick 事件。这将避免在没有ajax的情况下提交表单的问题，并修复Firefox问题。

Answer 3

$(document).ready(function() {

    $("#form").submit(function(event) {   

         var data = $("#form").serialize();
            $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: data,
            success: function(data, status, xhr) {

                console.log(data);
                console.log(status);
                console.log(xhr);
                $('#success').html(result.responseText);
            }

            });

    event.preventDefault();
        return false;
     });
})

1. 您的数据声明不在全局范围内。（我将其打包在正确的本地范围内）
2. $(form).serialize() 不等于 $("#form").serialize()
3. 编辑回您的url =)
4. 使用 Jsfiddle 和 Firebug/Chrome 开发工具来测试您的代码！

希望有帮助