3

这真的很令人沮丧，我将不胜感激。我有一个 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？）

4

3 回答 3

4

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

$.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。

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

于 2012-04-15T03:29:18.313 回答
1

您的文本框元素没有带有 value 的 id txtname。但是在您的脚本中，您尝试使用 using 访问#（应该使用 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()
        });
  });
});
于 2012-04-15T02:49:51.907 回答
0

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

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

jQuery event.preventDefault()

load() 方法执行的是 get 而不是 post。

于 2012-04-15T02:44:43.803 回答