blocks|key|652762|text|我想通了。基本上这是一个异步问题。您不能只提交并期望立即呈现后续页面。您必须等到下一页的onLoad事件被触发。我的代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|652763|var+page+=+new+WebPage(),+testindex+=+0,+loadInProgress+=+false;

page.onConsoleMessage+=+function(msg)+{
++console.log(msg);
};

page.onLoadStarted+=+function()+{
++loadInProgress+=+true;
++console.log("load+started");
};

page.onLoadFinished+=+function()+{
++loadInProgress+=+false;
++console.log("load+finished");
};

var+steps+=+[
++function()+{
++++//Load+Login+Page
++++page.open("https://website.com/theformpage/");
++},
++function()+{
++++//Enter+Credentials
++++page.evaluate(function()+{

++++++var+arr+=+document.getElementsByClassName("login-form");
++++++var+i;

++++++for+(i=0;+i+<+arr.length;+i%2B%2B)+{+
++++++++if+(arr[i].getAttribute('method')+==+"POST")+{

++++++++++arr[i].elements["email"].value="mylogin";
++++++++++arr[i].elements["password"].value="mypassword";
++++++++++return;
++++++++}
++++++}
++++});
++},+
++function()+{
++++//Login
++++page.evaluate(function()+{
++++++var+arr+=+document.getElementsByClassName("login-form");
++++++var+i;

++++++for+(i=0;+i+<+arr.length;+i%2B%2B)+{
++++++++if+(arr[i].getAttribute('method')+==+"POST")+{
++++++++++arr[i].submit();
++++++++++return;
++++++++}
++++++}

++++});
++},+
++function()+{
++++//+Output+content+of+page+to+stdout+after+form+has+been+submitted
++++page.evaluate(function()+{
++++++console.log(document.querySelectorAll('html')[0].outerHTML);
++++});
++}
];


interval+=+setInterval(function()+{
++if+(!loadInProgress+&&+typeof+steps[testindex]+==+"function")+{
++++console.log("step+"+%2B+(testindex+%2B+1));
++++steps[testindex]();
++++testindex%2B%2B;
++}
++if+(typeof+steps[testindex]+!=+"function")+{
++++console.log("test+complete!");
++++phantom.exit();
++}
},+50);|code-block|syntax|javascript|652764|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I figured it out. Basically it's an async issue. You can't just submit and expect to render the subsequent page immediately. You have to wait until the onLoad event for the next page is triggered. My code is below:

<pre class="lang-js prettyprint-override"><code>var page = new WebPage(), testindex = 0, loadInProgress = false;

page.onConsoleMessage = function(msg) {
 console.log(msg);
};

page.onLoadStarted = function() {
 loadInProgress = true;
 console.log("load started");
};

page.onLoadFinished = function() {
 loadInProgress = false;
 console.log("load finished");
};

var steps = [
 function() {
 //Load Login Page
 page.open("https://website.com/theformpage/");
 },
 function() {
 //Enter Credentials
 page.evaluate(function() {

 var arr = document.getElementsByClassName("login-form");
 var i;

 for (i=0; i &lt; arr.length; i++) { 
 if (arr[i].getAttribute('method') == "POST") {

 arr[i].elements["email"].value="mylogin";
 arr[i].elements["password"].value="mypassword";
 return;
 }
 }
 });
 }, 
 function() {
 //Login
 page.evaluate(function() {
 var arr = document.getElementsByClassName("login-form");
 var i;

 for (i=0; i &lt; arr.length; i++) {
 if (arr[i].getAttribute('method') == "POST") {
 arr[i].submit();
 return;
 }
 }

 });
 }, 
 function() {
 // Output content of page to stdout after form has been submitted
 page.evaluate(function() {
 console.log(document.querySelectorAll('html')[0].outerHTML);
 });
 }
];


interval = setInterval(function() {
 if (!loadInProgress &amp;&amp; typeof steps[testindex] == "function") {
 console.log("step " + (testindex + 1));
 steps[testindex]();
 testindex++;
 }
 if (typeof steps[testindex] != "function") {
 console.log("test complete!");
 phantom.exit();
 }
}, 50);
</code></pre>

blocks|key|438380|text|此外，CasperJS还为PhantomJS中的导航提供了一个很好的高级界面，包括单击链接和填写表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438381|CasperJS|offset|length|438382|已更新以添加July+28,+2015+article+comparing+PhantomJS+and+CasperJS。|438383|(感谢评论者M先生！)|438384|entityMap|0|LINK|mutability|MUTABLE|url|http://casperjs.org/|1|http://code-epicenter.com/why-is-casperjs-better-than-phantomjs/^0|0|0|8|0|0|6|1I|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

Also, CasperJS provides a nice high-level interface for navigation in PhantomJS, including clicking on links and filling out forms.

<a href="http://casperjs.org/" rel="noreferrer">CasperJS</a>

Updated to add <a href="http://code-epicenter.com/why-is-casperjs-better-than-phantomjs/" rel="noreferrer">July 28, 2015 article comparing PhantomJS and CasperJS</a>. 

(Thanks to commenter Mr. M!)

blocks|key|652836|text|发送原始POST请求有时会更方便。下面你可以看到来自PhantomJS的post.js+original+example|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|652837|//+Example+using+HTTP+POST+operation

var+page+=+require('webpage').create(),
++++server+=+'http://posttestserver.com/post.php?dump',
++++data+=+'universe=expanding&answer=42';

page.open(server,+'post',+data,+function+(status)+{
++++if+(status+!==+'success')+{
++++++++console.log('Unable+to+post!');
++++}+else+{
++++++++console.log(page.content);
++++}
++++phantom.exit();
});|code-block|syntax|javascript|652838|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ariya/phantomjs/blob/master/examples/post.js^0|10|O|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Sending raw POST requests can be sometimes more convenient. Below you can see <a href="https://github.com/ariya/phantomjs/blob/master/examples/post.js" rel="noreferrer">post.js original example</a> from PhantomJS

<pre><code>// Example using HTTP POST operation

var page = require('webpage').create(),
 server = 'http://posttestserver.com/post.php?dump',
 data = 'universe=expanding&amp;answer=42';

page.open(server, 'post', data, function (status) {
 if (status !== 'success') {
 console.log('Unable to post!');
 } else {
 console.log(page.content);
 }
 phantom.exit();
});
</code></pre>

blocks|key|438459|text|如上所述，CasperJS是填写和发送表单的最佳工具。如何使用fill()+function填写和提交表单的最简单示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|438460|casper.start("http://example.com/login",+function()+{
//searches+and+fills+the+form+with+id="loginForm"
++this.fill('form#loginForm',+{
++++'login':++++'admin',
++++'password':++++'12345678'
+++},+true);
++this.evaluate(function(){
++++//trigger+click+event+on+submit+button
++++document.querySelector('input[type="submit"]').click();
++});
});|code-block|syntax|javascript|438461|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.casperjs.org/en/latest/quickstart.html|1|http://docs.casperjs.org/en/latest/modules/casper.html#fill^0|5|8|0|V|F|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

As it was mentioned above <a href="http://docs.casperjs.org/en/latest/quickstart.html" rel="noreferrer">CasperJS</a> is the best tool to fill and send forms.
Simplest possible example of how to fill &amp; submit form using <a href="http://docs.casperjs.org/en/latest/modules/casper.html#fill" rel="noreferrer">fill() function</a>:

<pre><code>casper.start("http://example.com/login", function() {
//searches and fills the form with id="loginForm"
 this.fill('form#loginForm', {
 'login': 'admin',
 'password': '12345678'
 }, true);
 this.evaluate(function(){
 //trigger click event on submit button
 document.querySelector('input[type="submit"]').click();
 });
});
</code></pre>

I'm trying to use phantomJS (what an awesome tool btw!) to submit a form for a page that I have login credentials for, and then output the content of the destination page to stdout. I'm able to access the form and set its values successfully using phantom, but I'm not quite sure what the right syntax is to submit the form and output the content of the subsequent page. What I have so far is:

<pre><code>var page = new WebPage();
var url = phantom.args[0];

page.open(url, function (status) {

 if (status !== 'success') {
 console.log('Unable to access network');
 } else {

 console.log(page.evaluate(function () {

 var arr = document.getElementsByClassName("login-form");
 var i;

 for (i=0; i &lt; arr.length; i++) {

 if (arr[i].getAttribute('method') == "POST") {
 arr[i].elements["email"].value="mylogin@somedomain.com";
 arr[i].elements["password"].value="mypassword";

 // This part doesn't seem to work. It returns the content
 // of the current page, not the content of the page after 
 // the submit has been executed. Am I correctly instrumenting
 // the submit in Phantom?
 arr[i].submit();
 return document.querySelectorAll('html')[0].outerHTML;
 }

 }

 return "failed :-(";

 }));
 }

 phantom.exit();
}
</code></pre>

How to submit a form using PhantomJS

我正在尝试使用phantomJS (顺便说一句，这是一个多么棒的工具！)为我拥有登录凭据的页面提交表单，然后将目标页面的内容输出到stdout。我可以使用phantom成功地访问表单并设置它的值，但是我不太确定提交表单并输出后续页面内容的正确语法。到目前为止，我所拥有的是：var page = new WebPage(...

问如何使用PhantomJS提交表单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用PhantomJS提交表单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用PhantomJS提交表单
EN