用jQuery的.post（）方法只選擇HTML頁面的一部分？

我有一個擁有投票投票模塊的網站。輪詢控制器通過POST請求接受投票，該請求包含輪詢ID和響應ID作爲http://example.com/poll的參數。用jQuery的.post（）方法只選擇HTML頁面的一部分？

本網站的站點範圍模板以側欄中的當前輪詢爲特徵;它是一個簡單的形式，action屬性設置爲上述URL。然而，我正在用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>

我想插入響應到恰當地命名爲.responsediv標籤。任何幫助，指針或建議將不勝感激。

來源

2011-04-19 Martin Bean

一個更好的解決方案是將檢測到它是一個AJAX請求服務器端，只返回你所需要的內容，很多框架有這種內置的，但你可以手動通過檢查HTTP_X_REQUESTED_WITH頭實現類似的東西當執行AJAX請求時，被大多數主要JS框架（包括jQuery）添加。

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 ?>

來源

2011-04-19 12:30:37 Steve

值得注意的是'HTTP_X_REQUESTED_WITH'頭部在技術上不是任何規範的一部分，但它至少相當一致。其他建議作爲替代方法的檢查方式是在您的AJAX請求中傳遞附加的GET/POST變量並檢查是否存在該變量。無論哪種方式，當你只需要一部分文件時就會帶回整個文檔，這是浪費帶寬和時間。 – Steve 2011-04-19 12:32:33

如果數據包含了所有的HTML，那麼這樣的：

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

應該給你訪問只是＃內容的div，我想。不是很好，因爲它需要解析整個HTML。

來源

2011-04-19 11:53:23

我有問題與從一個AJAX請求，所以我使用了下面的方法返回的數據使用.find()/.filter()。

你可能想要做的是將數據應用到一個新的隱藏的temp元素，然後像往常一樣從那裏訪問它。

$.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(); 
});

來源

2011-04-19 11:55:23

// 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/

來源

2011-04-19 12:46:02 ezmilhouse

-2

我可能會做這樣的，但我只是一個初學者...

 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(); 
     }); 
    }

來源

2013-05-22 16:50:10

不錯的聲譽，但沒有評論你的恥辱...我們在這裏學習不要忘記。 – 2013-05-24 13:55:54

用jQuery的.post（）方法只選擇HTML頁面的一部分？

回答

相關問題