jQuery.ajax（）的HTML组件_Jquery_Html_Ajax

jQuery.ajax（）的HTML组件

jquery html ajax

jQuery.ajax（）的HTML组件,jquery,html,ajax,Jquery,Html,Ajax,我正在阅读jQuery网站上关于$.ajax（）方法的文档，但没有看到HTML的示例。我想知道如何将$.ajax（）函数与用户在提交按钮上的“单击”相关联。这是我最好的猜测，这是正确的方法吗以下是一个例子： <html> <head></head> <body> <form id="my_form"> <input type="text" name="name"><br /> <input type="t

我正在阅读jQuery网站上关于$.ajax（）方法的文档，但没有看到HTML的示例。我想知道如何将$.ajax（）函数与用户在提交按钮上的“单击”相关联。这是我最好的猜测，这是正确的方法吗

以下是一个例子：

<html>
<head></head>
<body>
<form id="my_form">
<input type="text" name="name"><br />
<input type="text" name="email"><br />
<textarea name="message"></textarea>
<input type="submit" name="submit">
</body>
</html>

您需要将函数绑定到由元素触发的事件。例如，要将函数绑定到

元素的

submit

事件，可以执行以下操作：

$(document).ready(function () {
    // ..
    $('#my_form').submit(function (event) {
        // ajax call here
    });
});

为了防止表单投递到页面（通常是这样），您需要在

事件

上添加对

preventDefault（）

的调用，如下所示：

$(document).ready(function () {
    // ..
    $('#my_form').submit(function (event) {
        // ajax call here
        event.preventDefault();
    });
});

将整个

$.ajax

包装在一个函数中，并将其绑定到表单的提交处理程序中：

function submitForm()
{
  $.ajax({
    ...
  });
}


<form ... onsubmit="submitForm(); return false">
</form>

函数submitForm（）
{
$.ajax({
...
});
}

返回false

很重要！否则您也将调用表单的默认提交

编辑

rfausak的答案更好

function submitForm()
{
  $.ajax({
    ...
  });
}


<form ... onsubmit="submitForm(); return false">
</form>