JQuery的$。員額在提交事件幫助

我所試圖做的是：

當您單擊窗體上的提交按鈕，頁面不會重新加載，而不是從表單數據發送到另一個頁面處理和該頁面的HTML輸出會替換當前頁面上的表單。更具體地說，我試圖讓添加評論表單工作而無需重新加載頁面（在該頁面上的Flash播放器中存在視頻流，並且如果每次有人提交評論時頁面會重新加載，則會浪費大量的金錢和帶寬）。

這是形式的標記：

<div id="add-media-comment"> 
    <form enctype="application/x-www-form-urlencoded" method="post" action="/view/add-media-comment/id/12"><ol> 
    <li><label for="body" class="required">Body</label> 
    <div class="element"> 
    <textarea name="body" id="body" rows="10" cols="50"></textarea></div></li> 
    <li><div class="button"> 
    <input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" /></div></li></ol></form> 
</div>

這裏是javascript代碼我使用：

$('#add-media-comment form').submit(function() { 
    // this is taken from the same page 
    // I have tested this with alert() and yes 
    // it is returning correct values 
    var id = $('#media-photo img').attr('id'); 
    var url = '/view/add-media-comment/id/' + id; 

    // let's submit the form to another page 
    $.post(url, $(this).serialize(), function() { 
     // and replace the content of #add-media-comment 
     // with the resulting HTML from the submission page 
     $('#add-media-comment').html(data); 
    }, 'html'); 

    return false; 
});

什麼情況是，點擊提交按鈕後，究竟什麼也沒有發生。該頁面不會重新加載，但我提交表單的頁面上的代碼也不會執行。

來源

2009-09-06 Richard Knop

請嘗試在回調$.post可用html，也沒有必要給第二個參數後（「HTML」），如果預期收益率數據爲HTML：

$.post(url, $(this).serialize(), function(html) { //instead of function() 
    alert(html); 
    // and replace the content of #add-media-comment 
    // with the resulting HTML from the submission page 
    $('#add-media-comment').html(data); 
});

來源

2009-09-06 01:53:19 karim79

沒有幫助，我提交表單的頁面沒有得到執行。 – 2009-09-06 02:07:29

當我嘗試$ .post回調中的警報（數據）時，什麼都不會發生。 – 2009-09-06 02:08:25

而不是綁定到表單提交事件，將該代碼綁定到按鈕的單擊事件。 – karim79 2009-09-06 02:18:04

您是否嘗試過使用的東西比如Firefox的Firebug插件？它讓您逐步調試以及跟蹤ajax發送/響應活動的控制檯。

jQuery的文檔上的簽名顯示成功回調的簽名：

function (data, textStatus) { 
    // data could be xmlDoc, jsonObj, html, text, etc... 
    this; // the options for this ajax request 
}

在這種情況下，它也使用try/finally塊，以確保您的表單總是提出一個好主意返回false。

$('#add-media-comment form').submit(function(event) { 
    try { 
     var id = $('#media-photo img').attr('id'); 
     var url = 'view/add-media-comment/id/' + id; 

     // let's submit the form to another page 
     $.post(url, $(this).serialize(), function(data, textStatus) { 
     // and replace the content of #add-media-comment 
     // with the resulting HTML from the submission page 
     $('#add-media-comment').html(data); 
     }, 'html'); 
    } 
    finally { 
     return false; 
    } 
});

來源

2009-09-06 02:20:07

嘗試修改你形成這樣的：

function Submit() { 
    $.ajax({ 
     type: "POST", 
     url: "/view/add-media-comment/id/" + $('#media-photo img').attr('id'), 
     dataType: "json", 
     data: $('#add-media-comment form').serialize(), 
     error: function(){ 
      //do something 
     }, 
     success: function(data){ 
      //do something 
     } 
    }); 
    return false; 
}

而不是JSON，您可以使用其他類型的：

<div id="add-media-comment"> 
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return False;"><ol> 
<li><label for="body" class="required">Body</label> 
<div class="element"> 
<textarea name="body" id="body" rows="10" cols="50"></textarea></div></li> 
<li><div class="button"> 
<input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" onclick="return Submit();"/></div></li></ol></form>

然後使用jQuery的ajax提交表單數據從你的服務器端返回功能..

來源

2009-09-06 02:24:35 user149513

JQuery的$。員額在提交事件幫助

回答

相關問題