Jquery .load和POST数据

Question

这真是令人沮丧，我将不胜感激。 我有一个div，称为注释和该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？）

Answer 1

在我看来，你正在以一种不完全连贯的方式混合一堆不同的技术。

$ .post是$ .ajax的缩短版本（ 见这里 ）。

$ .load接受一个url并将其粘贴到<div>或其他DOM元素中（ 参见此处 ）。

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

如果您使用$（＃...）。submit，您还可以在表单中遗漏一大堆内容。 以下应该可以正常工作。

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

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

你也使用#post作为DOM id混淆了水域。 你真的想给表单本身ID，然后使用$（＃form_id）.submit（...我现在无法测试它，但在输入字段上submit可能会引起一些悲伤。 官方的例子附上.submit到表单ID。

我也不确定带有id'comments'的<div>确实做得很多。 我有一个像你的'评论'的容器ID，但那是因为我通过AJAX构建表单并将它们粘贴到容器中。 如果您不需要这样做，则整个过程不需要id“comments”。

Answer 2

您的文本框元素没有值为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()
        });
  });
});

Answer 3

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

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

jQuery event.preventDefault（）

load（）方法执行get而不是post。