表单使用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内容

回答

相关问题