Question

我试图在不使用jQuery插件的情况下对表单进行AJAXIFY。实现这一目标的过程是什么？我有我的表格。我应该将动作设置为什么？标题脚本应该是什么？请记住，我不想使用任何插件。我只需要一个基本的算法来使用jquery来激活表单。

Answer 1

行动应为whatever it would be if you weren't using JavaScript。

注意：下面的链接都转到jQuery文档的相关部分）

然后，您bind a function to the submit会serialized表单数据并使用它来制作Ajax request（可能是reading the URI from the action attribute）。提交事件必须prevent the default action。

我相信jQuery会设置一个X-Requested-With HTTP标头。因此，您只需修改服务器端进程即可返回不同的数据（如果存在）（使用正确的值）。这可以像切换到不同的视图一样简单（如果您使用的是MVC模式）。

Answer 2

最简单的方法是使用$ .load（）方法。

$ .load（动作，数据，回调）

该操作可以是PHP脚本，ASP页面，也可以是其他网页。如果数据为null，则执行GET。否则，它执行POST。当方法完成时（不一定成功）执行回调方法。

http://docs.jquery.com/Ajax/load

例如：

<form>
    $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function {
        window.location.href = "orderComplete.htm";
    });
</form>

提交表单时，将使用itemID和作为数据传递的有序参数执行processOrder脚本。脚本完成后，浏览器将导航到orderComplete页面以进行其他处理或状态显示。

如果您希望更好地控制Ajaxification，可以使用$ .get，$ .post或$ .ajax方法。

Answer 3

这取决于。如果您只是想在不重新加载页面的情况下发送您的值，我建议您将表单的submit事件绑定到类似的函数

jQuery('form#myForm').bind(submitValues);

然后，您将设置功能

function submitValues() {
   //do stuff here
   jQuery.ajax({
      //your ajax parameters here
   });

   //this is important to cancel the default action on submit (ergo. go to the address as defined in action
   return false;
}

有关ajax命令的更多信息，请查看here

我如何使用jQuery来ajaxify表单？

3 个答案: