jsdom表单提交？

Question

我正在尝试使用Node.js包请求和jsdom来抓取网页，我想知道如何提交表单并获得他们的响应。我不确定使用jsdom或其他模块是否可以做到这一点，但我知道请求支持cookie。

下面的代码演示了如何使用jsdom (以及request和jQuery)来检索和解析web页面(在本例中是Wikipedia主页)。(请注意，此代码改编自本教程http://blog.nodejitsu.com/jsdom-jquery-in-5-lines-on-nodejs中的jquery-request.js代码)

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

上面的代码打印来自Wikipedia的搜索表单的超文本标记语言，然后打印"Wood"，这是我设置searchInput字段包含的值。当然，这里的click()方法实际上没有做任何事情，因为jQuery不是在浏览器中操作的；我甚至不知道jsdom是否支持任何类型的事件处理。

有没有什么模块可以帮助我以这种方式或类似的非jQuery方式与网页进行交互？这可以在jsdom中完成吗？

提前感谢！

Answer 1

如果您不想像在另一个答案中那样自己处理POST请求，您可以使用jsdom的替代方案，它可以在浏览器中支持更多的功能。

http://www.phantomjs.org/

Answer 2

我不太熟悉nodejs库，它可以让你获得一个完全交互的网页客户端视图，但你可以不用太担心就能得到表单提交的结果。

HTML forms本质上只是将HTTP请求发送到特定URL (可以作为form标记的action属性找到)的一种方式。通过访问DOM，您可以提取这些值并为指定的URL创建自己的请求。

请求维基百科主页的回调如下所示，您将得到搜索英文"keyboard cat“的结果：

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请求到form标记的action属性中指定的URL。
2. 使用表单的每个<
3. >d12标记的GET属性创建用于表单提交的字符串，并使用它们实际提交的值，格式为：name1=value1&name2=value2
4. For <代码>d16请求，只需将该字符串作为查询字符串追加到URL (URL?query-string)
5. For <代码>D20请求，将该字符串作为request.
6. Note的主体发布，用于表单提交的字符串必须进行转义，并使用空格表示为+.