使用 jQuery 和 AJAX 提交表单如果 return 设置为 false 则不会将值插入 SQL 以防止重定向

Posted 2023-02-24

【中文标题】使用 jQuery 和 AJAX 提交表单如果 return 设置为 false 则不会将值插入 SQL 以防止重定向

【英文标题】：Form submit using jQuery and AJAX not inserting values into SQL if return set to false in order to prevent redirect

【发布时间】：2013-12-06 21:00:03

【问题描述】：

我正在编写一个将一些数据发送到 mysql 数据库的表单，但与此同时，我不希望数据库提交将用户重定向到其他地方。出于这个原因，我通过 jQuery 和 AJAX 传递提交操作，如下所示：

form.submit(function()
    $('.msg').hide();
    if(form.valid()==true) 
        $('.msg.sharing').fadeIn(200);
        var sharecallback = false;
        var data = '&to=' + $('#shareto').prop('value') +
                   '&tomail=' + $('#sharetomail').prop('value') +
                   '&from=' + $('#sharefrom').prop('value') +
                   '&frommail=' + $('#sharefrommail').prop('value');
        $.ajax(
            type: 'POST',
            url: form.attr('action'),
            data: data,
            success: function() 
                sharecallback = true;
                $('.msg').hide();
                $('.msg.done').fadeIn(200);
                return false;
            ,
            error: function() 
                $('.msg').hide();
                $('.msg.error').fadeIn(200);
            
        );
        return false;
    ;
);

处理数据发布的 php 文件包含以下代码：

$where = 'here';
$to = htmlentities(addslashes($_POST['shareto']));
$tomail = htmlentities(addslashes($_POST['sharetomail']));
$from = htmlentities(addslashes($_POST['sharefrom']));
$frommail = htmlentities(addslashes($_POST['sharefrommail']));

$con = mysql_connect('localhost','root','mypass');
mysql_select_db('mydatabase', $con);
$sql="INSERT INTO list (date, whereto, towhom, tomail, fromwhom, frommail) VALUES (NOW(), '$where', '$to', '$tomail', '$from', '$frommail')";
mysql_close($con);

最后，我可以向您展示的所有其他内容都是 HTML 表单：

<form id="shareform" name="shareform" method="post" action="php/mail.php">
    <input id="shareto" name="shareto" />
    <input id="sharefrom" name="sharefrom" />
    <input id="sharetomail" name="sharetomail" />
    <input id="sharefrommail" name="sharefrommail" />
    <button type="submit" id="sharesubmit" name="sharesubmit"></button>
</form>

过去，我使用类似的编码来做类似的事情，并且效果很好。然而，这一次，我不知道自己哪里出了问题，但我已经一次又一次地经历了今天的大部分时间，我似乎找不到解决办法。

如果我去掉运行在if(form.valid()==true) ...末尾的return false，也就是说jQuery代码中的第二个return false，我就可以将数据输入到数据库中。问题是我被重定向到 PHP 文件中。如果我如上所示设置return false，我不会被重定向，但要输入的唯一数据是$where 变量和NOW() PHP 代码创建的日期，它们不是由AJAX 而是在 PHP 文件本身中创建的。所以我认为可以安全地假设将表单数据传递到 PHP 文件和数据库输入代码时出现问题当设置return false(*)。

(*)我已经测试过在没有return false 的情况下发布数据并打印数据内容，一切似乎都很好。我不能做的是在没有重定向发生时测试同样的事情。所以我不能确定问题是从 AJAX 到 PHP 还是从 PHP vars 到 DB 输入代码。

【参考方案1】：

是的，它会重定向到您提交表单的操作

问题来自于调用提交函数。 通过调用 .submit() 它在 submit() 中执行代码后将表单提交到特定操作，然后重定向到操作页面。

如何将 ajax 放在一个函数中，然后在 onsubmit 时调用它。

<form id="shareform" name="shareform" method="post" action="php/mail.php" onsubmit="ajax_submit(event);">
<input id="shareto" name="shareto" />
<input id="sharefrom" name="sharefrom" />
<input id="sharetomail" name="sharetomail" />
<input id="sharefrommail" name="sharefrommail" />
<button type="submit" id="sharesubmit" name="sharesubmit"></button>
</form>

js

function ajax_submit(e)

 //perform ajax 
 return false // to stop redirect
 //or 
 e.preventDefault();

【讨论】：

嗨，user3020044，感谢您的回复。我尝试通过onsubmit 上的函数传递它，但这样我无法捕获表单提交并阻止它重定向。我用return false 和preventDefault() 都试过了，但没有运气。表单只是重定向（当然，数据输入到数据库中，就像重定向时一样）。

尝试添加这个 onsubmit="return ajax_submit();"在表单属性中

现在试过了，就像之前的情况一样，我被重定向到 PHP。无法捕获提交并以这种方式阻止重定向；但数据已输入到我的数据库中。

【参考方案2】：

问题出在你的 PHP 上，你看，你与你的数据库建立了连接，你已经创建了查询，但是你在哪里执行它？在关闭连接之前输入mysql_query($sql) 并检查返回布尔值也只是为了小心。

if(mysql_query($sql))
   echo "query executed";
else
   echo "oops";

供您参考，不推荐使用 mysql 扩展，最好使用 mysqli 或 PDO。

为了防止重定向，您可以使用 `e.preventDefault()' 就像其他伙伴所说的那样。

编辑：在调用 form.valid() 之前添加 form.validate 它将解决您的 jQuery 问题

这是你的 jQuery 代码

form.submit(function()
    form.validate();
    if(form.valid()==true)
       
        $('.msg.sharing').fadeIn(200);
        var sharecallback = false;
        var data = '&shareto=' + $('#shareto').prop('value') +
                   '&sharetomail=' + $('#sharetomail').prop('value') +
                   '&sharefrom=' + $('#sharefrom').prop('value') +
                   '&sharefrommail=' + $('#sharefrommail').prop('value');
        $.ajax(
            type: 'POST',
            url: "mail.php",
            data: data,
            success: function() 
                sharecallback = true;
                $('.msg').hide();
                $('.msg.done').fadeIn(200);
                return false;
            ,
            error: function() 
                $('.msg').hide();
                $('.msg.error').fadeIn(200);
            
        );
        return false;
    
    return false;
);

【讨论】：

您好，tomcat，感谢您的回复。最后我确实有一个mysql_query($sql) 检查，以检查一切是否正常。我只是没有将它包含在代码示例中，因为我不想在我的帖子中乱扔代码。但非常感谢您的注意。你是对的：仔细检查总是一个好主意。

不，还没有……很遗憾！我正在拔头发。我有另一个类似的（几乎是双胞胎）表单提交编码，它工作正常！我正在比较它们，看看有什么不同。此时，我所能看到的不同之处在于 jQuery Validation Plugin [link] (jqueryvalidation.org) 的使用。但是我尝试过注释掉那个脚本加载器以及它的任何外观，但没有运气！ （很抱歉在我对您的回答的第一次回复中称您为“tomcat”......本可以发誓我读过“tomcat”但现在我看到了“pronox”......也许那时我的大脑正在说再见。）跨度>

【参考方案3】：

尝试将e.preventDefault(); 放在submit 事件处理程序的开头，而不是在末尾使用return false;。

哦，还记得把event参数传入事件处理器：

form.submit(function(e) 
    ...
);

【讨论】：

嗨，russellc，感谢您的回复。不幸的是，我也尝试过使用e.preventDefault()而不是return false，但结果是一样的：如果实施，没有重定向，但也没有数据输入。

如果你去掉表单验证的条件，它会通过吗？该问题可能与您对我认为可能是 jQuery 验证插件的 valid() 调用有关。

是的，你是对的，我使用 jQuery Validation Plugin [link] (jqueryvalidation.org) 以便在提交之前检查表单。我现在尝试注释掉 valid() 调用并让提交直接通过，但问题仍然存在。

【参考方案4】：

好的！幸运休息！ （或者，就像我经常对自己说的那样：去睡觉吧，让你的大脑休息一下，明天早上你就会意识到答案一直盯着你的脸……你会觉得自己很傻！）

但是，在这种情况下，解决方案非常随机，尽管有人告诉我：试试这个！

我正在构建我的数据，正如您在我的问题中看到的那样：

var data = '&to=' + $('#shareto').prop('value') +
           '&tomail=' + $('#sharetomail').prop('value') +
           '&from=' + $('#sharefrom').prop('value') +
           '&frommail=' + $('#sharefrommail').prop('value');

所以我对自己说：为什么不尝试序列化它而不是使用这种丑陋的代码……也许它甚至可以帮助您解决问题。

我丢弃了该代码并将data: data, 位更改为：

data: form.serialize(),

（其中form 是引用我的 HTML 表单的变量。）

我测试了它，交叉手指，看看是否奇迹般地修复了它，知道什么吗？：它成功了！

所以这是我的问题的简单解决方案，很难找到。

非常感谢帮助我的三个人。我在那里得到了非常有价值的信息！

【讨论】：

干得好，我测试了您的代码，即使您在if(form.valid()==true) 之前添加form.validate()，它也有效。也试试这个。

还有一件事，当您序列化表单时，它会通过处理您的 html 表单来发送请求，而在您的 jQuery 中，您正在取消表单并创建 AJAX 请求，您使用不同的名称作为参数，就像您使用 to, tomail etc尽管您应该按照 mail.php 的预期使用 shareto, sharetomail。

感谢您的最后评论。现在我知道之前的代码哪里出错了，以后不会再犯同样的错误了！

尝试使用谷歌浏览器的开发者工具，在网络选项卡中，您可以随时检查您的 AJAX 请求是如何进行的，哪些输入数据发送到服务器，最后但并非最不重要的是您可以检查什么响应是在您的案例 mail.php 中从您的服务器 php 脚本收到，然后您可以轻松地调试您的问题。

嘿！非常感谢“好工作”的奖励！就像我努力的金星。非常感谢网络选项卡上的 Chrome 开发工具提示！他们的开发工具真的很有帮助，但我从未探索过网络选项卡，所以我不知道我能用它做什么。它真的是我刚刚做的事情的救命稻草！所以这是一个很棒的信息，它会让我的生活更轻松。所以非常感谢！