我如何使用jQuery来ajaxify表单？

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

Answer 1

如果您不使用JavaScript，那么该操作应该是无论如何 。

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

然后，您将函数绑定到 序列化表单数据的submit事件，并使用该函数发出Ajax请求 （可能从action属性读取URI ）。 它必须阻止提交事件的默认操作 。

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

Answer 2

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

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

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

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

例如：

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

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

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

Answer 3

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

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

之后，您将设置该function

 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命令的更多信息，请查看此处