Ajax jQuery 表单无法正常工作，导航到 PHP 文件

Question

我在使用 ajaxForm 插件时遇到问题。我希望它在不离开页面的情况下向用户显示结果消息。

问题是，当我提交表单时，它没有将警报添加到 .jumbotron.modded（这是表单的 div 容器）中，而是导航到 supportForm.php 并仅显示回显的数字。

有时这确实很好用，但大多数时候它只是导航到 supportForm.php 。我不明白为什么它并不总是具有相同的行为。

这是 HTML 表单：

        <form id="supportForm" action="supportForm.php" method="post" style="padding-top:10px">
            <div class="form-group">
                <input type="text" name="subject" id="subject" placeholder="Subject" class="form-control" required>
            </div>
            <div class="form-group">
                <textarea class="form-control" rows="4" name="comment" id="comment" placeholder="Write your message here" required></textarea>
            </div>
            <button type="submit" class="btn btn-upload" style="margin-top:20px;float:right;" value="">SEND<img src="img/plus.png" style="margin-bottom:5px;padding-left:5px;" /></button>
        </form>

这是 Javascript 代码：

    window.onload = function()
    {
        $('#supportForm').ajaxForm({
            success: function(res) {
                console.log(res);
                if(res=='1')
                {
                    $(".jumbotron.modded").prepend('<div class="alert alert-success alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>Successfully sent. Thank you</div>');
                }else{
                    switch(res)
                    {
                        case '0':
                            $(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>Error 1. Please contact mail@asd.com<</div>');
                        break;
                        case '-1':
                            $(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>Error 2. Please contact mail@asd.com<</div>');
                        break;
                        case '-2':
                            $(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>Error 3. Please contact mail@asd.com</div>');
                        break;
                        case '-3':
                            $(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert">  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>Error 4. Please contact mail@asd.com<</div>');
                        break;
                    }
                }
            }
        });
    }

这是 PHP 代码：

if ($row = $db->query("SELECT user FROM tblusers WHERE userId='".$fromId."'")->fetch_array())
{
    $fromMail1 = $row['user'];
    if($row2 = $db->query("SELECT name,lastname,email FROM tblprofile WHERE userId='".$fromId."'")->fetch_array())
    {
        $fromMail2 = $row2['email'];
        $fromName = $row2['name']." ".$row2['lastname'];
        if ($db->query("INSERT INTO tblSupports (supportTitle,supportComment,userId) VALUES ('".$title."','".$comment."','".$fromId."')"))
        {
            if(sendEmail($fromMail1,$fromMail2,$fromName,$titleClean,$commentClean))
            {
                echo 1;
            }else{// (error 1)
                echo 0;
            }
        }else{//(error 2)
            echo -1;
        }
    }else{//(error 3)
        echo -2;
    }
}else{//(error 4)
    echo -3;
}

我该如何解决这个问题？非常感谢

Answer 1

试试这个

$('#supportForm').ajaxForm({
    /* bla-bla-bla*/

    return false;
    })

但我真的不明白，你使用这个插件是为了什么。无需任何插件即可轻松完成。

$('#submit').click(function(){
    $.ajax({
      method: "POST",
      url: "some.php",
      data: $('#supportForm').serialize(),
        success: function(data){
            alert(data)
        }
        error: function(error){
            alert(error);
        }
    });
    return false;
});

类似的东西。

Answer 2

确保在调用此函数之前实际包含您的 jquery.form.js 脚本。 例如，您可以在 firefox 上使用 firebug 进行检查：在 ajaxForm 调用上设置断点，然后当它停在那里时，查看 jquery.form.js 是否在脚本中。

Answer 3

在检查之前尝试对您的回复进行 .trim，那里可能有一些空白

$.trim(res);

编辑：修剪不起作用 - 在您点击提交之前，onload 功能是否可能没有触发？如果您按如下方式输入console.log，您将知道它是否肯定首先被触发。这可以解释为什么有时它有效，有时无效。如果在该控制台输出时它总是有效，那么您就有答案了。

 window.onload = function()
  {
    console.log('fired');
   $('#supportForm').ajaxForm({

Answer 4

一定要松开插件并确保已加载 Jquery，然后在您的 js 函数文件中使用：

$('#supportForm').on('submit', function(e) {
        e.preventDefault();
        $(this).find('input[type="submit"]').val('Processing');
        $.ajax({
            type: "POST",
            url: 'http://supportForm.php',
            data: $(this).serialize(),
            success:function(data) {
                if (data == 'success') {
                    -- Code if form submitted successfully & returned a positive output --
                }else{
                    -- Code if form submitted successfully but did not return a postive outpt --
                }
            },
            error: function() {
                -- Code if there is an error in your php --
            }
        })
    });

我对几乎所有表单都使用 Ajax，如果一切顺利，我所做的就是在我的 php 文件中回显成功。然后，正如您在上面的代码中看到的那样，“数据”将是从 php 文件中回显的任何内容，因此您可以继续为您想要回显的任何内容添加 if/else 案例。最后一部分是如果您的 php 文件中有错误，则该部分将被触发。