我使用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';
}
将$('form').unbind('submit');
添加到此行的正上方:$('form').submit(function()
。
我在这里找到了这个解决方案:https://stackoverflow.com/a/668354/300575
注意:我通过复制您的代码并在服务器上进行测试来验证这一点。
它可能是一个补丁,不知道它是否有效,但有一个jQuery ajaxStop
可以在成功回调时调用。