使用 jQuery ajax 和 PHP 复制到 mySQL 的条目

Posted 2023-02-24

【中文标题】使用 jQuery ajax 和 PHP 复制到 mySQL 的条目

【英文标题】：Duplicated entries to mySQL using jQuery ajax and PHP

【发布时间】：2012-09-02 15:47:56

【问题描述】：

我正在使用 jQuery（版本 1.8.1）和 php（版本 5.3）提交一个表单，将一个条目添加到一个 mysql 数据库中，发生的事情是第一次提交一切都很好，但是对于没有页面的每个后续提交刷新它会添加一个额外的条目。

此外，我还在 UI 中使用 Bootstrap（版本 2.1.1）和来自 Jasny 的用于 Bootstrap（版本 j1a）的上传小部件。我尚未将上传小部件连接到处理或提交，因为我在实施时检测到重复问题。

请注意，这是一个概念验证系统，因此代码很粗糙，因为在项目得到确认之前我不会投资清理它。因此，您会注意到一些内联的 mySQL 查询，我知道这不是最好的方法，但是它可以用于演示，稍后会进行清理。同样作为 POC 系统，它目前位于内部服务器上，我可以共享代码，但不幸的是目前无法显示示例站点。

现在回到问题，例如，“公司 1”的第一个帖子为“公司 1”添加了 1 条记录，“公司 2”的第二条记录为“公司 2”添加了 2 条记录，第三条“公司 3”的记录为“公司 3”添加 3 条记录，依此类推。如果我以任何方式（刷新或新请求）重新加载表单页面，问题将从第一次提交重新开始。

我正在使用 jQuery serialize 和 ajax 将数据发布到 PHP 处理器。我已经记录了处理器收到的所有帖子，并且我看到处理器正在从表单中接收多条记录，我认为这可能是由 PHP 中的 foreach 循环引起的，但事实并非如此。

我已经删除了 jQuery 函数，它每次都能完美运行，在正常的 PHP 提交上没有任何重复。 我已经通过 jQuery 而不是 serialize 手动处理条目，但是由于通过 PHP 有一个动态数组，我仍然在该数组上使用 serialize，这产生了如上所述的重复项。 我已经搜索了这个问题好几天，但找不到任何明确的解决问题的方法，所有看起来相关的博客和论坛上的建议都不起作用，我尝试了大约 10-15 种不同的选项。

所有这一切的结合让我相信问题来自 jQuery serialize 和/或 ajax 函数，但现在每次看这段代码时，我的眼睛都变得呆滞。

我也在考虑将表单放在一个外部文件中并通过 ajax 重新加载它，或者通过 jQuery 为每个所需的新条目清理将其设置回默认值的表单，但是我不相信这两种方法都可以解决问题。

非常感谢任何帮助，在此先感谢您的帮助！

jQUERY 代码

<script>
    $(document).ready(function() 
        $('.fileupload').fileupload('name:logo');
        $('.help-inline').hide();
        $("#btn_process").click(function() 
            $('form').submit(function() 
            $('.help-inline').hide();  
            var company_name = $("#company_name").val();  
            if (company_name === "")  
                $("div#name_group").addClass("error");
                $("span#name_error").show();   
                return false;  
             
            var dataString = $('form').serialize();
            $.ajax(
                type: "POST",
                url: "inc/addcompany.php",
                data: dataString,
                success: function(html) 
                    if(html === 'success') 
                    
                        $('#message')
                        .addClass("label label-success")
                        .css("margin-bottom","20px")
                        .html("<h3>Login successful</h3><p>Company added</p>")
                        .slideDown(1500, function() );
                    
                    else 
                    
                        $('#message')
                        .addClass("label label-important")
                        .css("margin-bottom","20px")
                        .html("<h3>Error</h3><p>There was an error, please check the information and try again</p>")
                        .slideDown(1500, function() );
                        $("div#name_error").addClass("error"); 
                        $("span#name_error").show(); 
                        $("div#type_error").addClass("error");
                        $("span#type_error").show();   
                        return false;  
                    
                
            );
            return false;
        ); 
    );
);
</script>

HTML 标记

<form class="form-horizontal" id="add_company" method="POST" action="">  
                <fieldset>
                        <div id="message"></div>
                        <div id="name_group" class="control-group">
                            <label class="control-label" for="company_name">Company name </label>
                            <div class="controls">
                                <input type="text" id="company_name" name="company_name" />
                                <span id="name_error" class="help-inline">This needs to be more than 3 characters</span>
                            </div>
                        </div>
                        <div id="type_group" class="control-group">
                            <label class="control-label">Company type </label>
                            <div class="controls">
                            <?
                            $sql = "SELECT description,id FROM types ORDER BY description";
                            $qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error());
                            while($company_type = mysql_fetch_array($qry))  
                                echo '
                                <label class="checkbox inline"><input type="checkbox" name="type[]" value="'.$company_type['id'].'" /> '.$company_type['description'].' </label>';
                            
                            ?>
                            <span id="type_error" class="help-inline">Please select a minimum of 1 type</span>
                            </div>
                        </div>
                        <div id="website_group" class="control-group">
                            <label class="control-label" for="website">Website </label>
                            <div class="controls">
                                <input type="text" id="website" name="website" placeholder="www.something.com" />
                            </div>
                        </div>
                        <div id="logo_group" class="control-group">
                            <label class="control-label">Logo </label>
                            <div class="controls">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="/img/50x50.png" /></div>
                                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
                                <span class="btn btn-file"><span class="fileupload-new">Select image</span>
                                <span class="fileupload-exists">Change</span>
                                <input type="file" /></span>
                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                            </div>
                        </div>
                </fieldset>
                <input type="hidden" name="action" value="add_company" />
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" name="btn_process" id="btn_process">Save changes</button>
  </form>

PHP 处理器

$error = false;
$error_company_name = false;
$error_type = false;
$error_website = false;
$company_name = $_REQUEST['company_name'];
$type = $_REQUEST['type'];
$website = $_REQUEST['website'];
$logo = $_REQUEST['logo'];

if(empty($company_name)) 
    $error = true;
    $error_company_name = true;

include_once('db.php');
$sql = "SELECT description,id FROM company_types";
$qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error());
$type_count = 0;
while($array = mysql_fetch_array($qry)) 
    $type_count = $type_count+1;

if($type_count == 0) 
    $error = true;
    $error_type = true;

$ic = 0;
foreach($_REQUEST['type'] as $item) 
    $ic = $ic+1;

if($ic == 0) 
    $error = true;
    $error_type = true;

if(isset($website) && $website != ' ') 
    $url = 'http://'.$website;
    if(!filter_var($url, FILTER_VALIDATE_URL)) 
        $error = true;
        $error_website = true;
    

if($error == false) 
    $sql = "INSERT INTO company_list (name,website,logo) VALUES('$company_name','$website','$logo')";
    $qry = mysql_query($sql) or die ("ERROR: could not add company => ".mysql_error());
    $company_id = mysql_insert_id($link);
    if($company_id == '' || $company_id == null || empty($company_id)) 
        echo 'fail';
        exit;
     
    foreach($_REQUEST['type'] as $company_type) 
        $sql = "INSERT INTO companies_types (companies_id,type_id) VALUES('$company_id','$company_type')";
        $qry = mysql_query($sql) or die("ERROR: could not link company type: => ".mysql_error());
    
    echo 'success';

【问题讨论】：

我看不出你是如何刷新页面的......或者我今天只是累了:-)。我们可以在实际中看到这一点吗？以防万一您可能想在 .html () 之前尝试隐藏 () 或删除 ()；即 $(selector).remove ().html ('blah') 也在你的点击甚至尝试添加 event.stopImmediatePropagation ();

您在随后的点击中是否在控制台中看到多个 ajax 调用？

@xlordt 发布的代码是 jQuery ajax 提交的问题代码，因此代码中没有刷新，我已经删除了 jQuery 并且没有问题，但是使用 jQuery 会出现问题。当我通过刷新或导航回 URL 重新加载页面时，问题再次出现。我希望进一步澄清这一点。干杯！

@techie_28 我只是通过 PHP 登录并刚刚添加了console.log(dataString)，是的，它确实在每次后续单击时在控制台中重复。我不敢相信我以前没想过要记录它！所以这只是验证了 PHP 不是问题，关于 JS 下一步该去哪里的任何想法？已经非常感谢了。

@Ryan 你能试试建议的吗？如果 console.log () 显示多个日志而不是 stopImmediatePropagation 应该为你解决问题，我也有类似的问题。

【参考方案1】：

在此行正上方添加$('form').unbind('submit');：$('form').submit(function()。

我在这里找到了这个解决方案：https://***.com/a/668354/300575

注意：我通过复制您的代码并在我的服务器上对其进行测试来验证它是否有效。

【讨论】：

感谢这位朋友，辛苦了...出于好奇，您是如何找到该帖子的？找的时候没看到再次感谢伙计。

我通过 G00gle 搜索了“jquery submit multiple times” :-)

酷，我想我一直在使用“重复”这个词……需要增加我的词汇量！哈哈...再次感谢迈克！

【参考方案2】：

它可能是一个补丁，不知道它是否会起作用，但是有一个 jQuery ajaxStop 可以在成功回调时调用。

【讨论】：

感谢这位朋友，非常感谢您的帮助！