我有一个关于使用 ajax 发布后重复数据的问题。我有没有 id 只有数据属性的按钮。我使用数据表库。单击后，我调用带有表单的模态。表单中有两个字段:输入文本和隐藏输入。 在单击事件中，我在隐藏控件中填充值。第一次提交后一切正常。但是在第二次点击并使用相同的模式提交之后，我在控制台中有这样的双重数据:
Object {isSuccess: true, carId: 13550, message: "Post success"}
Object {isSuccess: true, carId: 13550, message: "Post success"}
我觉得这个问题对某人来说很简单，但我一个人解决不了。 此代码来自 HTML DOM:
<table id="carsInventory">
<tr>
<td>
<button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13551" data-car-brand="MAZDA" data-car-model="Mazda6" class="btn btn-large btn-bids">Bid</button>
<td>
</tr>
<tr>
<td>
<button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13550" data-car-brand="CADILLAC" data-car-model="CTS" class="btn btn-large btn-bids">Bid</button>
<td>
</tr>
</table>
<div class="modal fade" id="inv-bid-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-toggle="bidModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<form id="inv-bid-form" method="post">
<div class="modal-body">
<p class="intro-bid">
Your Maximum Bid:
</p>
<div class="input-group">
<span class="input-group-addon">$ </span>
<input id="userBid" type="text" value="" class="form-control" name="userBid" required pattern="\d+(\.\d{2})?">
<span class="input-group-addon">.00</span>
</div>
<i class="intro-bid">
($100 USD Bid Increments)
</i>
<input id="invCarId" type="hidden" value="" name="invCarId" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-bid" value="Bid Now">
</div>
</form>
</div>
</div>
</div>
Javascript(底部加载)
$(document.body).on('click', "[data-target=#inv-bid-modal]", function(e)
{
var that = $(this)
var carBrand = that.attr('data-car-brand'),
carModel = that.attr('data-car-model'),
title = $("#inv-bid-modal .modal-title"),
car = that.attr('data-car-id');
submitBidForm( e, car );
title.html('');
title.append(carBrand + ' ' + carModel);
});
function submitBidForm(data, id)
{
var bidForm = $("#inv-bid-form"),
bidModal = $("#inv-bid-modal"),
objectBtn = $(data.target),
carId = id,
bidField = $('#userBid'),
carIdField = $('#invCarId');;
carIdField.val(carId);
bidForm.submit(function(event)
{
event && event.preventDefault();
var that = $(this),
bid = bidField.val();
if( bid < 100 )
{
setBsMessages('warning', 'Incorect increment!');
bidField.val('');
carIdField.val('');
}else{
var request = $.ajax({
url : '/car/rest/setBid/',
method : 'POST',
async : false,
data : that.serialize(),
success : function(result,textStatus, jqXHR)
{
if(result.isSuccess)
{
bidModal.modal('hide').fadeOut('fast');
objectBtn.attr('disabled',true);
bidField.val('');
carIdField.val('');
}else{
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Invalid bid!');
}
},
error: function (result, textStatus, errorThrown) {
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Error! ' + result);
}
});
return false;
}
});
}
function setBsMessages(type, message)
{
var messages = $("#inv-bid-messages");
messages.append('<div id="bs-alert" class="alert alert-' + type + ' fade in">' + message+ '</div>');
$('#bs-alert').delay(2000).fadeOut("slow", function () { messages.remove(); });
}
PHP
public function setBid() {
header('Content-type: text/json');
header('Content-type: application/json');
$result = false;
if ( $_POST['invCarId'] ) {
$this->load->model('bid');
$bidModel = new bid();
$carId = (int) $_POST['invCarId'];
$bidValue = (int) $_POST['userBid'];
if ( $bidModel->isExistBid($carId))
{
$data = [
'isSuccess' => 'exist',
'carId' => $carId,
'message' => 'Bid exist'
];
echo json_decode($data);
exit;
}
if ( $bidModel->addBid( $carId, $this->current_user->id, $bidValue ) ) {
$result = true;
} else {
$result = false;
}
$data = [
'isSuccess' => (bool) $result,
'carId' => $carId,
'message' => 'Post success'
];
echo json_encode($data);
exit;
} else {
echo json_decode($result);
exit;
}
}
提前致谢。
最佳答案
我找到的解决方案是:
function submitBidForm(data, id)
{
var bidForm = $("#inv-bid-form"),
bidModal = $("#inv-bid-modal"),
objectBtn = $(data.target),
carId = id,
bidField = $('#userBid'),
carIdField = $('#invCarId');;
carIdField.val(carId);
var status = true; // Set default status
bidForm.submit(function(event)
{
event && event.preventDefault();
var that = $(this),
bid = bidField.val();
if( bid == undefined || parseInt(bid) < 100 )
{
setBsMessages('warning', 'Incorect increment!');
bidField.val('');
carIdField.val('');
return false;
}
if(status) {
status = false; // Set status false to preventing second post
var request = $.ajax({
url : '/car/rest/setBid/',
method : 'POST',
dataType : 'json',
cache : 'false',
data : that.serialize(),
success : function(result,textStatus, jqXHR)
{
if(result.isSuccess)
{
bidModal.modal('hide').fadeOut('fast');
objectBtn.attr('disabled',true);
bidField.val('');
carIdField.val('');
bidForm.reset();
var status = true; // Status true if post pass
return false;
}else{
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Invalid bid!');
}
},
error: function (result, textStatus, errorThrown) {
bidModal.modal('hide').fadeOut('fast');
bidField.val('');
carIdField.val('');
setBsMessages('error', 'Error! ' + result);
}
});
return false;
}
});
}
我知道这个解决方案不是最好的，但它确实有效。我希望有人能给出更明智的答案。
关于javascript - 单击事件的重复数据并使用ajax提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30585038/