Выбрать только часть HTML-страницы с помощью метода .post () в jQuery? - PullRequest
Новая
       5

Выбрать только часть HTML-страницы с помощью метода .post () в jQuery?

3 голосов
/ 19 апреля 2011

У меня есть веб-сайт с модулем голосования. Контроллер опроса принимает голос через POST запрос, содержащий идентификатор опроса и идентификатор ответа в качестве параметров для http://example.com/poll.

Общесайтовый шаблон этого сайта показывает текущий опрос на боковой панели; это простая форма с атрибутом 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;
});

Как видите, он просто перехватывает отправляемую форму, а затем выполняет POST, используя jQuery, а не запрос полной страницы, поэтому посетитель никогда не покидает страницу, на которой он находится.

Моя проблема: весь HTML-код страницы возвращается в ответе $.post (строка с вызовом alert()). Как я могу выбрать содержимое возвращаемого тега #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 тег. Любая помощь, указатели или предложения будут высоко оценены.

Ответы [ 5 ]

3 голосов
/ 19 апреля 2011 
// 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/

1 голос
/ 19 апреля 2011

Лучшим решением было бы обнаружить, что это AJAX-запрос на стороне сервера, и вернуть только тот контент, который вам нужен, во многие фреймворки это встроено, но вы можете вручную реализовать нечто подобное, проверяя заголовок HTTP_X_REQUESTED_WITH, добавленныйбольшинство основных JS-фреймворков (включая 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 ?>
0 голосов
/ 22 мая 2013

Я бы, наверное, так и сделал, но я только начинающий ... 

        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();
      });
  }
0 голосов
/ 19 апреля 2011

У меня были проблемы с использованием .find() / .filter() при возврате данных из запроса AJAX, поэтому я использовал следующий метод.

Что вы можете сделать, это применить данные к новому скрытому временному элементу, а затем получить к ним обычный доступ. 

$.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();
});
0 голосов
/ 19 апреля 2011

Если данные содержат весь HTML, то это: 

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

должно дать вам доступ только к #content div, я думаю.Не очень приятно, так как нужно разобрать весь HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...