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。