0

我有这段代码从表单中获取信息并将其发送到 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 传递变量。

主页.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;
?>
4

3 回答 3

1

event.preventDefault();尝试通过移动到调用之前稍微更改 jqueryajax并修复您的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以便更好地衡量。

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

于 2011-09-26T23:59:24.013 回答
0

尝试摆脱$('#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 问题。

于 2011-09-26T23:54:53.467 回答
0 
$(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. 编辑回您的网址 =)
  4. 使用 Jsfiddle 和 Firebug/Chrome 开发工具来测试你的代码！

希望有帮助

于 2011-09-27T00:11:54.830 回答