我目前面临着jQuery post功能的困难，我在google上使用了其他一些例子。我曾尝试在stackoverflow中搜索解决方案，但遗憾的是我太穷了，无法找出错误。
以下是我以前为确认框做的jQuery示例：
(function ($) {
/**
* Confirm a link or a button
* @param [options] {{title, text, confirm, cancel, confirmButton, cancelButton, post, confirmButtonClass}}
*/
$.fn.confirm = function (options) {
if (typeof options === 'undefined') {
options = {};
}
this.click(function (e) {
e.preventDefault();
var newOptions = $.extend({
button: $(this)
}, options);
$.confirm(newOptions, e);
});
return this;
};
/**
* Show a confirmation dialog
* @param [options] {{title, text, confirm, cancel, confirmButton, cancelButton, post, confirmButtonClass}}
* @param [e] {Event}
*/
$.confirm = function (options, e) {
// Do nothing when active confirm modal.
if ($('.confirmation-modal').length > 0)
return;
// Parse options defined with "data-" attributes
var dataOptions = {};
if (options.button) {
var dataOptionsMapping = {
'title': 'title',
'text': 'text',
'confirm-button': 'confirmButton',
'cancel-button': 'cancelButton',
'confirm-button-class': 'confirmButtonClass',
'cancel-button-class': 'cancelButtonClass'
};
$.each(dataOptionsMapping, function(attributeName, optionName) {
var value = options.button.data(attributeName);
if (value) {
dataOptions[optionName] = value;
}
});
}
// Default options
var settings = $.extend({}, $.confirm.options, {
confirm: function () {
var url = e && (('string' === typeof e && e) || (e.currentTarget && e.currentTarget.attributes['href'].value));
if (url) {
if (options.post) {
var form = $('<form method="post" class="hide" action="' + url + '"></form>');
$("body").append(form);
form.submit();
} else {
window.location = url;
}
}
},
cancel: function (o) {
},
button: null
}, dataOptions, options);
// Modal
var modalHeader = '';
if (settings.title !== '') {
modalHeader =
'<div class=modal-header>' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">' + settings.title+'</h4>' +
'</div>';
}
var modalHTML =
'<div class="confirmation-modal modal fade" tabindex="-1" role="dialog">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
modalHeader +
'<div class="modal-body">' + settings.text + '</div>' +
'<div class="modal-footer">' +
'<button class="confirm btn ' + settings.confirmButtonClass + '" type="button" data-dismiss="modal">' +
settings.confirmButton +
'</button>' +
'<button class="cancel btn ' + settings.cancelButtonClass + '" type="button" data-dismiss="modal">' +
settings.cancelButton +
'</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var modal = $(modalHTML);
modal.on('shown.bs.modal', function () {
modal.find(".btn-primary:first").focus();
});
modal.on('hidden.bs.modal', function () {
modal.remove();
});
modal.find(".confirm").click(function () {
settings.confirm(settings.button);
});
modal.find(".cancel").click(function () {
settings.cancel(settings.button);
});
// Show the modal
$("body").append(modal);
modal.modal('show');
};
这是我用来提交表单和确认框的php文件：
<form role="form" action="bannerConfig.php" method="POST">
<div class="box-body">
<div class="form-group" >
<label for="bannerWidth">Width 宽度</label>
<input type="number" class="form-control" name="bannerWidth" id="bannerWidth" placeholder="600px" onChange="checkDisabled(simpleConfirm);">
</div>
<div class="form-group">
<label for="bannerHeight">Height 高度</label>
<input type="number" class="form-control" name="bannerHeight" id="bannerHeight" placeholder="280px" onChange="checkDisabled(simpleConfirm);">
</div>
<p class="help-block">Recommended Banner Size: (1920px * 500px)</p>
<div class="checkbox">
<button id="simpleConfirm" type="submit" class="btn btn-primary" disabled>Update</button>
</div>
</div><!-- /.box-body -->
</form>
<!--Banner configuration confirmation-->
<script>
$(document).ready(function(){
$("#simpleConfirm").confirm();
});
</script>
每次我点击＆＃34;是＆＃34;它应该发布并链接到bannerConfig.php但是当我点击＆＃34;是＆＃34;时它什么也没发生。我有什么错误的代码吗？提前致谢，祝你有个愉快的一天。
EDITED：这是我的服务器端php代码：
<?php
include 'dbConnection.php';
global $dbLink;
//Gather all required data
$width = $dbLink->real_escape_string($_POST['bannerWidth']);
$height = $dbLink->real_escape_string($_POST['bannerHeight']);
//Create the SQL query
//$query = "INSERT INTO banner_config (banner_id, banner_height, banner_width, date) VALUES ('','{$height}', {$width}, NOW())";
$query = "UPDATE banner_config SET banner_height = '$height', banner_width = '$width', date=NOW()";
//Execute the query
$result = $dbLink->query($query);
//Check if it was successfull
// Close the mysql connection
$dbLink->close();
?>
答案 0 :(得分：1)
在您的情况下，问题是，您正在创建一个动态表单，并且在没有任何输入数据的情况下提交它，而不是提交按钮所在的表单。
我认为实际的表单提交逻辑可以使用回调来完成。像
// Default options
var settings = $.extend({}, $.confirm.options, {
confirm: $.noop,
cancel: function (o) {},
button: null
}, dataOptions, options);
然后
$("#simpleConfirm").confirm({
confirm: function (el) {
el.closest('form').submit()
}
});
演示：Fiddle
另一种选择是找到按钮所在的表单，然后像
一样提交 // Default options
var settings = $.extend({}, $.confirm.options, {
confirm: function () {
var $form = $(e.target).closest('form');
var url = $form.attr('action');
if (url) {
if (options.post) {
$form.submit();
} else {
window.location = url;
}
}
},
cancel: function (o) {},
button: null
}, dataOptions, options);
演示：Fiddle