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（see here）的缩短版本。

$ .load获取一个url并将其粘贴到<div>或其他DOM元素（see here）中。

如果我理解正确（我可能不会！），你真的不想加载表单，而是将值放入表单字段中。 $ .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可能会引起一些悲伤。 official example将.submit附加到表单ID。

我也不确定带有“评论”的<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。

Jquery .load和POST数据

3 个答案: