Jquery .load和POST数据

Question

Jquery .load和POST数据

3

这真的很令人沮丧，我希望能得到一些帮助。我有一个名为“comments”的div，并在其中放置了一个表单。我想要做的是将表单发布到当前页面，并使其在不重新加载整个页面的情况下加载到该div中。以下是我的当前代码：

<div id="comments">
<form action="#" method="post" onsubmit="return false;" >
<input type="hidden" name="txtname" value="test">
<textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"></textarea>
<input type="submit" name="post" id="post" value="Submit">
</form>
<script type="text/javascript">
EDIT: Read edit below for current code
</script>        
</div>

当我提交时，警报会触发，但页面不会加载。如果我将事件更改为以下方式，则可以正常工作：

$("#comments").load("comments.asp");

这段代码不是用来发布数据的。我之前使用过.load，但从未用于发布数据。我从这些论坛中获取了上述代码。

我真的不确定'name'和'tel'的目的——在处理代码时，我是参考这些变量还是表单变量名称？这是在ASP经典版中。

以上代码有什么问题，如何通过POST发送表单数据？谢谢！

编辑：我现在使用以下代码：

$("#post").submit(function(event){
    var $form = $(this),
        $inputs = $form.find("input, select, button, textarea"),
        serializedData = $form.serialize();
    $inputs.attr("disabled", "disabled");

    $.ajax({
        url: "/comments.asp",
        type: "post",
        data: serializedData,
        success: function(response, textStatus, jqXHR){
            console.log("comment posted");
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log(

                textStatus, errorThrown
            );
        },
        complete: function(){
            // enable the inputs
            $inputs.removeAttr("disabled");
        }
    });

    event.preventDefault();
});

现在表单已经被正确处理了...但是它跳转到了comments.asp页面。我该如何让所有操作发生在特定的div中（评论div）？

- Katherine Perotta

3个回答

1

你的文本框元素没有一个值为txtname的id。但是在你的脚本中，你试图使用#（它应该是在id上下文中）来访问它。因此，请给你的输入框添加一个id元素。

<input type="hidden" name="txtname" id="txtname"  value="test">

正如expascarello所说，您需要停止提交按钮的默认行为。否则它将执行正常的表单提交，因此您将无法感受到ajax效果。使用preventDefault

$(function(){
   $("#post").click(function(e) {
     e.preventDefault()
     alert("clicked");
        $("#comments").load("comments.asp", { 
         'name': $("#wysiwyg").val(), 
         'tel': $("#txtname").val()
        });
  });
});

- Shyju

0

您没有取消按钮的点击事件，因此表单正在提交并重置页面。

$("#post").click(function(evt) {
    evt.preventDefault();
    ...

jQuery event.preventDefault()

load() 方法执行的是 GET 而不是 POST。

- epascarello

好的，我正在研究.post方法 - 它是否仍然具有与.load相同的效果 - 是否仍会加载该页面（该页面上有一个确认消息需要被加载） - Katherine Perotta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick · Accepted Answer

在我看来，你正在以一种不太连贯的方式混合使用许多不同的技术。

$.post 是 $.ajax 的缩写 (点击此处)。

$.load 接受一个 URL 并将其放入 <div> 或其他 DOM 元素中 (点击此处)。

如果我理解正确的话（可能不是！），你并不真正想要加载表单，而是将值放入表单字段中。$.load 是一种奇怪的方法（它可能有效，但我会用另一种方法）。

如果你正在使用 $(#...).submit，那么在表单中可以省略很多东西。以下代码应该可以正常工作。

<form id="form_id">
...
<input type="submit" value="Submit">
</form>

我的方法是：（1）有一个硬编码的HTML表单（或通过AJAX构建），（2）使用$.post（或$.ajax）从数据库（或其他地方）获取值，（3）使用.val（）（或等效物-适合输入类型的任何内容）和该输入的DOM id将值插入表单，然后（4）使用.submit（类似于您的方式）。您需要像其他人建议的那样添加preventDefault。

您还在混淆使用#post作为DOM id。您真正想要给表单本身设置ID，然后使用$（#form_id）。submit（...无法测试它，但在输入字段上使用submit可能会引起一些麻烦。官方示例将.submit附加到表单id。

我也不确定具有id“comments”的

实际上是否真的有什么用处。我有一个容器id，就像您的“comments”一样，但那是因为我通过AJAX构建表单并将它们放入容器中。如果您不需要这样做，则id“comments”对整个过程没有必要。