jQuery Ajax 不从外部 PHP 返回变量答案

【问题标题】：jQuery Ajax not returning variables from external PHPjQuery Ajax 不从外部 PHP 返回变量
【发布时间】：2011-09-26 23:46:39
【问题描述】：

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

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

在 Chrome 中，ajax 确实有效，但只会将 Fullname: Email: Link: Instructions: 拉入#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>

form.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;
?>

【问题讨论】：

标签： jquery ajax variables html message-passing

【解决方案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() 会阻止表单提交。主要是使用这种表单提交方法，首先要停止表单的默认行为。

【讨论】：

【解决方案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 问题。

【讨论】：

他希望提交一个 XHR 基础表单，而不是在 dom 上发送和清空表单。

【解决方案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;
     });
})

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

希望有帮助

【讨论】：