使用jQuery的.post()方法仅选择HTML页面的一部分?

| 我有一个具有投票民意调查模块的网站。轮询控制器通过“ 0”请求接受投票,该请求包含轮询ID和响应ID作为“ 1”的参数。 该站点的站点范围模板在侧边栏中具有当前民意调查。一种简单的形式,将“ 2”属性设置为上述网址。但是,我正在用jQuery劫持这一点,以异步方式提交投票。 这是我到目前为止拥有的功能:
$(\'form.poll\').submit(function() {
    var form = this;
    var response = $(\'div.response\', form);
    if ($(\'input:checked\', form).length == 0) {
        response.fadeOut(\'fast\', function() {
            $(this).html(\'<p class=\"error\">Please select an option.</p>\').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(\'<p class=\"success\">Vote successfully added.</p>\').fadeIn(\'fast\');
        });
    }
    return false;
});
如您所见,它仅拦截提交的表单,然后使用jQuery而不是整页请求执行
POST
,因此访问者永远不会离开他们所在的页面。 我的问题是:整个页面的HTML都返回
$.post
响应(带有
alert()
调用的行)。我如何挑选返回的HTML的
#content
<div>
标签的内容,以用作我的民意调查表中的响应?投票表的标记为:
<form action=\"/poll\" method=\"post\" id=\"poll\" class=\"poll\"> 
  <h3>Poll</h3> 
  <p class=\"question\">Who do you think will win the Lockdown main event?</p> 
  <div class=\"response\"><!--//--></div> 
  <fieldset> 
    <input type=\"hidden\" name=\"poll\" value=\"1\" /> 
    <ul class=\"options\"> 
      <li><label for=\"option_1\"><input type=\"radio\" name=\"response\" value=\"1\" id=\"option_1\" /> Mr Anderson</label></li> 
      <li><label for=\"option_2\"><input type=\"radio\" name=\"response\" value=\"2\" id=\"option_2\" /> Rob Van Dam</label></li> 
      <li><label for=\"option_3\"><input type=\"radio\" name=\"response\" value=\"3\" id=\"option_3\" /> Sting</label></li> 
    </ul> 
    <input type=\"submit\" name=\"vote\" value=\"Vote\" class=\"button\" /> 
  </fieldset> 
</form>
我想将响应插入恰当命名的
.response
div
标签中。任何帮助,指示或建议将不胜感激。
已邀请:
更好的解决方案是检测它是服务器端的AJAX请求,仅返回所需的内容,许多框架都内置了该框架,但是您可以通过检查大多数主要JS框架添加的added12ѭ标头来手动实现类似的操作(包括jQuery)在执行AJAX请求时。 PHP中的垃圾示例可能类似于以下内容:
<?php if (strtolower($_SERVER[\'HTTP_X_REQUESTED_WITH\']) != \'xmlhttprequest\' ) : ?>
  <html>
    <head/>
    <body>
<?php endif ?>

      <p>Martin\'s form stuff!</p>

<?php if (strtolower($_SERVER[\'HTTP_X_REQUESTED_WITH\']) != \'xmlhttprequest\' ) : ?>
    </body>
  </html>
<?php endif ?>
// 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/
如果数据包含所有HTML,则此操作:
$(data).find(\"#content\")
我认为,应该只允许您访问#content div。不太好,因为它需要解析整个HTML。
我在从AJAX请求返回的数据上使用
.find()
/
.filter()
时遇到问题,因此我使用了以下方法。 您可能想要做的是将数据应用于新的,隐藏的临时元素,然后照常从那里访问它。
$.post(action, $(form).serialize(), function(data) {
    // create the new element, might want to generate a unique / random name
    $(\'body\').append(\'<div id=\"temp_element\' style=\"display: none;\"></div>\');        
    // 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();
});
我可能会这样,但是我只是一个初学者。
        var PlaceHolder = $(\"#placeholder\"); //placeholder (this is a <DIV>)
        $.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();
      });
  }

要回复问题请先登录注册