Html代码：
<div class="col-lg-12" style="position:relative">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-files-o fa-fw"></i> Add New Video
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form" id="VideoAdd" action="process_VideoAdd.php" method="POST">
<div class="form-group">
<div class="alert" style="display:none;" id="videoError">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-star"></i>
</span>
<input class="form-control" placeholder="Video Url" name="vurl" id="vurl" type="text" required>
</div>
</div>
<div class="form-group">
<div class="form-group">
<input type="submit" class="btn btn-md btn-info btn-block" value="Update">
</div>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
Php代码
<?php
error_reporting(E_ALL);
require("include/inc.php");
require("include/class/class.admin.php");
$admin=New adminClass($db);
if (!$admin->LoggedIn())
{
echo "error_redirect";
}else
{
if($_POST["vurl"])
{
if($admin->AddVideo($_POST["vurl"]))
{
echo "success";
}else{
echo "Error in updating";
}
}
}
?>
js code
$("#VideoAdd").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$("#videoError").hide();
$.ajax(
{
url : formURL,
type: "POST",
cache: false,
data : postData,
success:function(data, textStatus, jqXHR)
{
if(data=="error_redirect")
{
window.location="login.php";
}else if(data=="success"){
$("#videoError").removeClass("alert-danger");
$("#videoError").show();
$("#videoError").addClass("alert-success");
$("#videoError").html("Successfully Updated");
} else {
alert(data);
$("#videoError").show();
$("#videoError").addClass("alert-danger");
$("#videoError").html("Error in updating");
}
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault(); //STOP default action
});
这是我通过ajax提交url值的代码。在本地主机（wamp服务器）中使用时效果很好。但是当我将此代码上传到我的网络服务器并运行它时，它总是在点击提交按钮时向数据库提交两次。
答案 0 :(得分：0)
使用js作为： - //禁用此按钮 //将按钮ID作为 //禁用添加按钮
var is_request_sent = false; // declare global var for request
$("#VideoAdd").submit(function(e)
{
if(is_request_sent == false)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$("#videoError").hide();
$.ajax(
{
url : formURL,
type: "POST",
cache: false,
data : postData,
success:function(data, textStatus, jqXHR)
{
if(data=="error_redirect")
{
window.location="login.php";
}else if(data=="success"){
$("#videoError").removeClass("alert-danger");
$("#videoError").show();
$("#videoError").addClass("alert-success");
$("#videoError").html("Successfully Updated");
} else {
alert(data);
$("#videoError").show();
$("#videoError").addClass("alert-danger");
$("#videoError").html("Error in updating");
}
},
error: function(jqXHR, textStatus, errorThrown)
{
is_request_sent = false;
$('#submit_form').removeAtrr('disabled');
},
beforeSend: function(){
// Handle the beforeSend event
is_request_sent = true;
$('#submit_form').atrr('disabled','disabled');
},
complete: function(){
// Handle the complete event
is_request_sent = false;
}
});
e.preventDefault(); //STOP default action
}
});
答案 1 :(得分：0)
我已更改了您的HTML代码，并且还有一些js更改。 e.preventDefault（）;没有使用你的代码，因为提交是一个功能而不是一个事件。
Html代码：
<div class="col-lg-12" style="position:relative">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-files-o fa-fw"></i> Add New Video
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form" id="VideoAdd">
<div class="form-group">
<div class="alert" style="display:none;" id="videoError">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-star"></i>
</span>
<input class="form-control" placeholder="Video Url" name="vurl" id="vurl" type="text" required>
</div>
</div>
<div class="form-group">
<div class="form-group">
<input type="submit" id="videoSbmt" class="btn btn-md btn-info btn-block" value="Update">
</div>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
js code
$("#videoSbmt").click(function(e)
{
var postData = $("#videoAdd").serializeArray();
var formURL = "process_VideoAdd.php";
$("#videoError").hide();
$.ajax(
{
url : formURL,
type: "POST",
cache: false,
data : postData,
success:function(data, textStatus, jqXHR)
{
if(data=="error_redirect")
{
window.location="login.php";
}else if(data=="success"){
$("#videoError").removeClass("alert-danger");
$("#videoError").show();
$("#videoError").addClass("alert-success");
$("#videoError").html("Successfully Updated");
} else {
alert(data);
$("#videoError").show();
$("#videoError").addClass("alert-danger");
$("#videoError").html("Error in updating");
}
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault(); //STOP default action
});
答案 2 :(得分：0)
你的e.preventDefault(); //STOP default action应该是你做的第一件事，而不是最后一件事。请记住$.ajax()调用是异步的，因此在运行时，可能正在运行默认操作。
$("#VideoAdd").submit(function(e)
{
e.preventDefault(); //STOP default action
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$("#videoError").hide();
$.ajax({
url : formURL,
type: "POST",
cache: false,
data : postData,
success:function(data, textStatus, jqXHR) {
if(data=="error_redirect") {
window.location="login.php";
}else if(data=="success"){
$("#videoError").removeClass("alert-danger");
$("#videoError").show();
$("#videoError").addClass("alert-success");
$("#videoError").html("Successfully Updated");
} else {
alert(data);
$("#videoError").show();
$("#videoError").addClass("alert-danger");
$("#videoError").html("Error in updating");
}
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
});
答案 3 :(得分：0)
使用.one（），
尝试此操作$("#VideoAdd").one('submit'. function(e){
...
});