Jquery .load和POST数据

这真是令人沮丧，我会感谢一些帮助。我有一个div，在该div内部称为评论和表单。我想要做的是将表单发布到当前页面，并将其加载到div中，而不用重新加载整个页面。这是我目前的代码：Jquery .load和POST数据

<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？）

来源

2012-04-15 Katherine Perotta

在我看来，你是混合了一堆不同的技术的方式，也不是完全一致的。

$ .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）使用$。员额（或$阿贾克斯）从数据库中获取值（或地方），（3）使用.val（）（或等价物 - 无论是否适合输入类型）和该输入的DOM id将值粘贴到表单中，然后（4）使用.submit（以类似于您的方式）。您需要按照其他人的建议添加preventDefault。

你也使用#post作为DOM id混浊水域。你真的想给表单本身的ID，然后使用$（＃form_id）.submit（...我现在不能测试它，但在输入字段上有submit可能会导致一些悲伤official example附加.submit to the form id。

我也不确定<div>与id'comments'真的有很大的作用。我有一个像'comments'这样的容器id，但那是因为我通过AJAX创建了表单并将其粘贴如果你不需要这样做，整个过程不需要id'comments'

来源

2012-04-15 03:29:18 Nick

谢谢你的回应，是啊我很困惑在这一点上。这是我试图做的事情：我想显示一个评论框，它允许用户添加评论。当他们点击“提交”时，我想要提交评论，重新加载页面（带有确认消息，因此我需要能够访问该数据），然后再次显示相同的表单框，以便他们可以制作另一评论。所有这些都需要在同一个DIV中进行。基本上我想处理一个单独的div内的表单。 – 2012-04-15 03:37:05

无需使用AJAX重新加载页面即可实现所有这些。你想显示每个提交的评论吗？所以首先，只有评论框。然后，在添加第一条评论之后，显示评论，给出确认消息，并且该框在评论之下。然后，当添加另一条评论时，显示两条评论，给出第二条评论的确认，并且该框仍然存在等...（所有在评论div内）。这是你想要的效果吗？ – Nick 2012-04-15 03:41:59

尼克，显示评论来自数据库，我已经有另一种显示方法。基本上，我唯一需要做的就是能够发布评论，而无需重新加载整个页面。评论发布的SQL部分在同一页面上处理（comments.asp）。在这一点上，我相当肯定即时通讯，使这远比它需要更复杂。 – 2012-04-15 03:49:13

你不取消点击按钮，所以表单提交并重置页面。

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

jQuery event.preventDefault()

的load（）方法做了GET而不是一个职位。

来源

2012-04-15 02:44:43 epascarello

确定即时通讯阅读.post - 它是否仍然有同样的效果.load - 将它仍然加载该页面（我有一个确认消息在该页面上加载） – 2012-04-15 03:01:33

请阅读我的编辑在o riginal后，如果你看到这个 – 2012-04-15 03:09:29

您的文本框元素不具有值为txtname的ID。但是在你的脚本中，你试图使用#（这应该是一个id上下文）来访问。所以在你的输入框中添加一个id元素。

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

而随着expascarello说，你需要停止提交按钮的默认行为。其他方面，它会做正常的形式张贴，所以你不会觉得阿贾克斯效应。使用preventDefault

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

来源

2012-04-15 02:49:51 Shyju

Jquery .load和POST数据

回答

相关问题