jsdom 양식 제출?

Question

Node.js 패키지 요청과 jsdom을 사용하여 웹 페이지를 긁어 내려고합니다. 양식을 제출하고 응답을받을 수있는 방법을 알고 싶습니다. 이 jsdom 또는 다른 모듈을 사용할 수 있는지 확실하지 않지만 요청 쿠키를 지원하는지 알고 있습니다.

다음 코드는 jsdom (request 및 jQuery와 함께)을 사용하여 웹 페이지 (이 경우 Wikipedia 홈 페이지)를 검색하고 구문 분석하는 방법을 보여줍니다. 위의 코드는 위키 백과의 검색 양식, 다음 "나무", 나는 searchInput 필드를 설정 값에서 HTML을 인쇄

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

(이 코드는이 튜토리얼 http://blog.nodejitsu.com/jsdom-jquery-in-5-lines-on-nodejs에서 JQuery와 - request.js 코드에서 적응합니다) 포함하다. 물론 jQuery가 브라우저에서 작동하지 않기 때문에 click() 메서드는 실제로 아무 것도하지 않습니다. jsdom이 모든 종류의 이벤트 처리를 지원하는지 여부조차 모르겠습니다.

이와 같은 방법으로 웹 페이지와 상호 작용할 수있는 모듈이 있습니까? 아니면 비 jQuery가 아닌 방식으로 모듈을 사용할 수 있습니까? 이것은 jsdom에서 끝날 수 있습니까?

미리 감사드립니다.

Answer 1

다른 답변과 같이 직접 POST 요청을 처리하지 않으려면 브라우저에서 더 많은 것을 지원하는 jsdom 대신 사용할 수 있습니다.

http://www.phantomjs.org/

Answer 2

웹 페이지의 완전한 대화 형 클라이언트 측보기를 얻을 수있는 nodejs 라이브러리에 익숙하지 않지만, 너무 많은 걱정없이 양식 제출 결과를 얻을 수 있습니다.

HTML 양식은 기본적으로 HTTP 요청을 특정 URL (form 태그의 action 속성으로 볼 수 있음)로 보내는 방법입니다. 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. "검색 제출"은 실제로 form 태그의 action 속성에 지정된 URL에 HTTP GET 또는 POST 요청을 보내는 것을 의미합니다.
2. 실제로이 형식으로 제출하는 가치와 결합 된 형태의 input 태그의 각각의 name 속성을 사용하여 양식 제출에 사용할 문자열을 만듭니다 name1=value1&name2=value2
3. GET에 대한 요청을, 단지 해당 문자열을 추가 쿼리 문자열 (URL?query-string)의 URL
4. POST 요청의 경우 해당 문자열을 요청 본문으로 게시하십시오.
5. 양식 제출에 사용 된 문자열은 이스케이프되어야하며 공백은 +으로 표시되어야합니다.