JSDOM форма представления? - PullRequest
Новая
       20

JSDOM форма представления?

3 голосов
/ 10 января 2012

Я пытаюсь использовать запрос пакетов Node.js и jsdom для очистки веб-страниц, и я хочу знать, как я могу отправлять формы и получать их ответы.Я не уверен, возможно ли это с jsdom или другим модулем, но я знаю, что запрос поддерживает куки.

Следующий код демонстрирует, как я использую jsdom (вместе с request и jQuery) для получения иразбирать веб-страницу (в данном случае домашнюю страницу Википедии).(Обратите внимание, что этот код адаптирован из кода jquery-request.js из этого урока http://blog.nodejitsu.com/jsdom-jquery-in-5-lines-on-nodejs)

var request = require('request'),
    jsdom = require('jsdom'),

    url = 'http://www.wikipedia.org';

request({ uri:url }, function (error, response, body) {
  if (error && response.statusCode !== 200) {
    console.log('Error when contacting '+url);
  }

  jsdom.env({
    html: body,
    scripts: [
      'http://code.jquery.com/jquery-1.5.min.js'
    ]
  }, function (err, window) {
    var $ = window.jQuery,
        // jQuery is now loaded on the jsdom window created from 'agent.body'
        $searchform = $('#searchform'); //search form jQuery object

    $('#searchInput').val('Wood');

    console.log('form HTML is ' + $searchform.html(),
      'search value is ' + $('#searchInput').val()

    //how I'd like to submit the search form
    $('#searchform .searchButton').click();
    );
  });
});

Приведенный выше код печатает HTML-код из формы поиска в Википедии, а затем «Дерево», значение, которое я установилполе searchInput для хранения. Конечно, здесь метод click () на самом деле ничего не делает, потому что jQuery не работает в браузере, я даже не знаю, поддерживает ли jsdom какой-либо вид обработки событий.

Есть ли какой-нибудь модуль, который может помочь мне взаимодействовать с веб-страницами таким же образом или аналогичным образом, не являющимся jQuery? Это можно сделать в jsdom?

Заранее спасибо!

Ответы [ 2 ]

3 голосов
/ 10 января 2012

Если вы не хотите обрабатывать запрос POST самостоятельно, как в другом ответе, вы можете использовать альтернативу jsdom, которая поддерживает больше вещей в браузере.

http://www.phantomjs.org/

0 голосов
/ 10 января 2012

Я не знаком с библиотекой nodejs, которая позволит вам получить полностью интерактивный клиентский вид веб-страницы, но вы можете получить результаты отправки формы без особого беспокойства.

HTML-формы - это просто способ отправки HTTP-запросов на определенный URL-адрес (который можно найти как атрибут action тега form). Имея доступ к DOM, вы можете просто извлечь эти значения и создать свой собственный запрос для указанного URL.

Примерно так: обратный вызов при запросе домашней страницы википедии даст вам результат поиска "клавиатурный кот" на английском языке: 

var $ = window.jQuery;

var search_term = "keyboard cat";
var search_term_safe = encodeURIComponent(search_term).replace("%20", "+");

var lang = "en";
var lang_safe = encodeURIComponent(lang).replace("%20", "+");

var search_submit_url = $("#searchform").attr("action");
var search_input_name = $("#searchInput").attr("name");
var search_language_name = $("#language").attr("name");

var search_string = search_input_name + "=" + search_term_safe + "&" + search_language_name + "=" + lang_safe;

// Note the wikipedia specific hack by prepending "http:".
var full_search_uri = "http:" + search_submit_url + "?" + search_string;

request({ uri: full_search_uri }, function(error, response) {
    if (error && response.statusCode != 200) {
        console.log("Got an error from the search page: " + error);
    } else {
        // Do some stuff with the response page here.
    }
});

В основном важные вещи:

  1. «Отправка поиска» на самом деле означает отправку запроса HTTP GET или POST на URL-адрес, указанный в атрибуте action тега form.
  2. Создайте строку для использования при отправке формы, используя атрибуты name каждого из тегов input формы в сочетании со значением, которое они фактически отправляют, в следующем формате: name1=value1&name2=value2
  3. Для GET запросов просто добавьте эту строку к URL-адресу в виде строки запроса (URL?query-string)
  4. Для POST запросов отправьте эту строку в качестве тела запроса.
  5. Обратите внимание, что строка, используемая для отправки формы, должна быть экранирована и иметь пробелы, представленные как +.
...