使用 jquery 和 ajax 时 html 中的表单操作？答案

【问题标题】：form action in html when jquery and ajax are used?使用 jquery 和 ajax 时 html 中的表单操作？
【发布时间】：2013-07-20 00:26:45
【问题描述】：

我有下面的 Jquery/ajax 代码来调用 servlet

$.ajax({
        type: "POST",
        url: "./myController",
        data: dataString,
        ............

    });

我编写了一个在提交点击时调用的 JQuery 函数。我已经在上面提到了 AJax 调用中的 url ./myController。

在这种情况下，我应该在form action 中提到什么？

<form action="./myController"

在表单操作中我是否需要如上所述提及 url？因为我已经在上面的 ajax 调用中提到了它。

谢谢！

【问题讨论】：

您的表单不必定义动作。在处理提交的函数中，您需要输入 preventDefault() 或 return false; 或类似的内容，以防止表单实际发布和重定向。

标签： java javascript jquery html ajax

【解决方案1】：

此处不需要表单中的操作网址。不过，您可以在 ajax 调用中使用表单操作 -

$('form').on('submit',function(e){
    e.preventDefault(); // to prevent default submit action
    $.ajax({
        type: "POST",
        url: this.action,
        ......
})

【讨论】：

【解决方案2】：

您可以从实际表单中删除操作并添加onsubmit 标记。所以表单只会触发 ajax/JQuery POST。

<form onsubmit="submitform();return false;">

【讨论】：

@Mattthew，感谢您的回复。我应该按名称“submitform()”编写一个单独的 javascript 函数吗？
是的，你可以随意命名函数，我只是举个例子。通过使用onsubmit HTML 标记，您的表单将自动调用 JavaScript 函数，并且在最后使用 return false; 将不会尝试实际提交表单。
感谢您的回复。

【解决方案3】：

在您的 ajax 调用中设置 url 就足以满足您的目的，无需更改表单元素上的任何内容。

正如@Willem Ellis 所说，您需要防止使用 preventDefault() 时的默认行为，否则您的页面将在执行 ajax 调用后向服务器发送完整的帖子。

另外，从您的 cmets 中，我建议您像这样处理提交事件

$('#theform').submit(function(e){ 
   e.preventDefault();
   ... // your ajax logic, etc
});

【讨论】：

那么我不需要在表单上设置任何操作？
请告诉我在哪里可以做 preventDefault() ？
它的开头是： $(document).ready(function() { $('#theform #submit').click(function() {............ .
#theform #submit?恐怕选择器没有意义（尽管可以工作）。这就是你所拥有的？
感谢您的回复。保留您的更改后，我需要从表单中删除操作标签吗？