表單使用jQuery提交html內容

<form id="form1"> 
<ul> 
<li>Content</li> 
<li>Content</li> 
<li>Content</li> 
</ul> 
<input type="submit" value="Submit" /> 
</form>

我想在點擊提交按鈕時發送ul標籤中的內容。表單使用jQuery提交html內容

提交的數據應該是

<li>Content</li> 
<li>Content</li> 
<li>Content</li>

我怎麼會寫這jQuery和適當字符。轉義爲<>的

來源

2009-12-28 proGress

聲明：這是我的其他基於AJAX的答案的替代方案。

您可以通過使用javascript設置隱藏字段的值來實現此目的。另外，你的表單需要一個「action」屬性 - 它必須被提交到某個地方。

<!-- HTML --> 
<form action="/my_script.php" id="my_id"> 
    <ul> 
    Stuff... 
    </ul> 
    <input type="hidden" name="html /> 
</form>

腳本：

$("#my_id").submit(function() { 
    var html = $(this).find("ul").html(); 
    $(this).find("input[name=html]").val(escape(html)); 
    // don't return false, we want the submit event to go through 
});

的形式將提交，和隱藏字段將有來自<ul></ul>標籤作爲價值逃脫的HTML。

來源

2009-12-28 06:56:37

勾提交，這樣做：

$("#form1").submit(function() { 
    // do stuff 
    return false; 
});

與下列之一替換// do stuff部分：

$.ajax({ 
    url: "...", 
    type: "POST", 
    data: $("#form1 ul").html() 
});

如果你想逃避它，我會在服務器端做到這一點。你也可以做到這一點，執行客戶端逃生：

$.ajax({ 
    url: "...", 
    type: "POST", 
    data: escape($("#form1 ul").html()) 
});

我認爲最好的解決方法是將其作爲發送JSON到服務器。

$.ajax({ 
    url: "...", 
    dataType: "json", 
    // the value of `type` is irrelevant here 
    data: {html: $("#form1 ul").html(), moreMetadDtaIfYouWant: 5} 
});

但是，這是你的電話;）

來源

2009-12-28 05:25:58

原始HTML實際上可以序列化爲查詢字符串嗎？即使它有效，我也不知道服務器如何能夠接受這樣的請求。它必須位於表單字段中，無論它是「真實」表單字段還是手動組裝的查詢字符串。 – Aaronaught 2009-12-28 05:30:03

好點，它實際上不會工作。如果它是一個POST請求，它會。轉義（或未轉義）的HTML只是原始的後期主體。例如，在一個Rails應用程序中，您將不得不使用'request.body'而不是'params [：something]'。我會相應地更新我的答案。 – 2009-12-28 05:54:19

這可以是一個正常的請求，而不是Ajax？我想它重新加載頁面就像使用正常的形式。返回false;是防止 – proGress 2009-12-28 06:37:56

嗯，我認爲你將不得不提交內部某種形式的字段，因此你要首先必須創建某種類型的輸入你的價值觀，如果我不得不冒險猜測，可能隱藏在你的形式。

<input id="your_id" type="hidden" />

然後使用jQuery，你可以在表單的的onsubmit做到這一點...

$("#form1").submit(function(){ 
    $("#your_id").val($("#form1 ul").html()); 
}

我不知道，如果表單將自動躲避HTML您要提交與否雖然。

來源

2009-12-28 05:26:49 Ryan

hmm ..隱藏字段中的數據永遠不會發布 – proGress 2009-12-28 06:36:15

可能是因爲您的表單沒有「操作」屬性。至少不是你在問題中提到的那個。 – 2009-12-28 07:08:15

表單使用jQuery提交html內容

回答

相關問題