使用jQuery的.post（）方法仅选择HTML页面的一部分？

我有一个有投票调查模块的网站。 轮询控制器通过POST请求接受投票，该请求包含投票ID和响应ID作为http://example.com/poll参数。

此站点的站点范围模板以侧栏中的当前民意调查为特色; 它是一个简单的表单，其action属性设置为上述URL。 但是，我正在用jQuery劫持这个以异步方式提交民意调查投票。

这是我到目前为止的function：

 $('form.poll').submit(function() { var form = this; var response = $('div.response', form); if ($('input:checked', form).length == 0) { response.fadeOut('fast', function() { $(this).html('
Please select an option.
').fadeIn('fast'); }) } else { var action = $(form).attr('action'); $.post(action, $(form).serialize(), function(data) { alert('Data loaded: ' + data); }); $('fieldset', form).fadeOut('fast'); response.fadeOut('fast', function() { $(this).html('
Vote successfully added.
').fadeIn('fast'); }); } return false; }); 

如您所见，它只是拦截正在提交的表单，然后使用jQuery而不是整页请求执行POST ，因此访问者永远不会离开他们所在的页面。

我的问题是：整个页面的HTML返回$.post响应（带有alert()调用的行）。 如何选择返回的HTML的#content

标记的内容，以便在我的投票表单中用作响应？ 民意调查表格的加价是：

 
 
Poll
 
Who do you think will win the Lockdown main event?
 
 
  
 
 Mr Anderson
 
 Rob Van Dam
 
 Sting
 
  
  

我想将响应插入到恰当命名的.response div标签中。 任何帮助，指示或建议将不胜感激。

Answer 1

一个更好的解决方案是检测它是一个AJAX请求服务器端并且只返回你需要的内容，许多框架内置了这个，但是你可以通过检查大多数主要JS框架添加的HTTP_X_REQUESTED_WITH头来手动实现类似的东西（包括jQuery）在执行AJAX请求时。

PHP中的垃圾示例将是：

      
Martin's form stuff!
     

Answer 2

 // just to be sure that it's of dataType html already var data = $(data).html(); // grab element's content var content = $(data).find('#content').html(); alert(content); 

在这里找到工作演示： http ： //jsfiddle.net/ezmilhouse/BSrk6/

Answer 3

如果数据包含所有HTML，那么：

 $(data).find("#content") 

我认为应该让你访问#content div。 不太好，因为它需要解析整个HTML。

Answer 4

我在从AJAX请求返回数据时使用.find() / .filter()时遇到了问题，所以我使用了以下方法。

您可能想要做的是将数据应用于新的隐藏的临时元素，然后照常从那里访问它。

 $.post(action, $(form).serialize(), function(data) { // create the new element, might want to generate a unique / random name $('body').append('
'); // apply the response data to the temp element $('#temp_element').html(data); // Martin, did you mean #content... or #response as I have it here? // alert out only the element you need alert( $('#response', '#temp_element').html(); // remove the temp element $('#temp_element').remove(); }); 

Answer 5

我可能会这样做，但我只是一个初学者……

  var PlaceHolder = $("#placeholder"); //placeholder (this is a 
) $.ajax({ type: $(theForm).attr('method'), url: $(theForm).attr('action'), data: $(theForm).serialize(), datatype: "html" }) .done(function (html) { PlaceHolder.html(html); PlaceHolder.find('#content').each(function(){ $(document).find(".response").html(this.html()); }); }) .fail(function (html) { alert('KO'); //window.location.reload(); }); }