我正在尝试将数据从表单发送到数据库。这是我使用的表格:
<form name="foo" action="form.php" method="POST" id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /> </form>
典型的方法是提交表单,但这会导致浏览器重定向。使用jQuery和Ajax,是否可以捕获表单的所有数据并将其提交给PHP脚本(例如 form.php )?
的基本用法.ajax如下所示:
.ajax
HTML:
<form id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /> </form>
jQuery的:
// Variable to hold request var request; // Bind to the submit event of our form $("#foo").submit(function(event){ // Prevent default posting of form - put here to work in case of errors event.preventDefault(); // Abort any pending request if (request) { request.abort(); } // setup some local variables var $form = $(this); // Let's select and cache all the fields var $inputs = $form.find("input, select, button, textarea"); // Serialize the data in the form var serializedData = $form.serialize(); // Let's disable the inputs for the duration of the Ajax request. // Note: we disable elements AFTER the form data has been serialized. // Disabled form elements will not be serialized. $inputs.prop("disabled", true); // Fire off the request to /form.php request = $.ajax({ url: "/form.php", type: "post", data: serializedData }); // Callback handler that will be called on success request.done(function (response, textStatus, jqXHR){ // Log a message to the console console.log("Hooray, it worked!"); }); // Callback handler that will be called on failure request.fail(function (jqXHR, textStatus, errorThrown){ // Log the error to the console console.error( "The following error occurred: "+ textStatus, errorThrown ); }); // Callback handler that will be called regardless // if the request failed or succeeded request.always(function () { // Reenable the inputs $inputs.prop("disabled", false); }); });
注:由于jQuery的1.8.success(),.error()并.complete()支持已被弃用.done(),.fail()并且.always()。
.success()
.error()
.complete()
.done()
.fail()
.always()
注意:请记住,上面的代码段必须在DOM准备就绪后完成,因此您应该将其放在$(document).ready()处理程序中(或使用$()简写形式)。
$(document).ready()
$()
提示:您可以 像这样链接回调处理程序:$.ajax().done().fail().always();
$.ajax().done().fail().always();
PHP(即form.php):
// You can access the values posted by jQuery.ajax // through the global variable $_POST, like this: $bar = isset($_POST['bar']) ? $_POST['bar'] : null;
注意:始终 清理发布的数据,以防止注入和其他恶意代码。
你也可以使用速记.post代替.ajax在上面的JavaScript代码:
.post
$.post('/form.php', serializedData, function(response) { // Log the response to the console console.log("Response: "+response); });
注意:上面的JavaScript代码适用于jQuery 1.8及更高版本,但它应适用于jQuery 1.5之前的版本。