最近在做一个项目,要求集成到第三方系统中,由于先前没有做过类似的活,所以折腾了几天,蹭着有闲情的时候记录一下。

以下实例,都是我用Asp.net语言进行开发的,关于HTML元素的获取,使用的是Google浏览器。

1. 非Asp.net开发的网站

      我们拿www.51cto.com来做实例,首先进入www.51cto.com,点击登录,就进入到该博客的登录页面。使用Google浏览器,按下F12,找到其表单的action值,可以发现其action值为 http://home.51cto.com/index.php?s=/Index/doLogin,然后点击账号和密码的文本框,右击鼠标,审查元素,分别找到其对应的name值。

下面的代码是账号文本框的html代码,我们要的是其name属性,发现只为email,同样的方法我们可以得到密码的name属性。



<input name="email" type="text" class="login_shuru1" onfocus="this.className='login_shuru2';if (this.value=='用户名/注册邮箱') {this.value=''}" onblur="this.className='login_shuru1';if (this.value=='') {this.value='用户名/注册邮箱'}" value="用户名/注册邮箱">



我们要的基本元素都已经,现在我们就可以模拟登录51cto了,新建一个Asp.net的项目,写上几行html代码,如下



<form action="http://home.51cto.com/index.php?s=/Index/doLogin" method="post" name="_DominoForm" id="form1" >
        <input name="email" id="email" type="hidden" value="whonest@sohu.com" />
        <input name="passwd" id="passwd" type="hidden" value="password" />
</form>



然后再写两行JS代码,进行表单提交



var theForm = document.getElementById('form1');
theForm.submit();



现在运行程序看一下,如果填写的用户名和密码正确的话,发现就已经模拟登录到51cto的网站了。

[多说一句:如果登录失败,和该网站的按钮有点关系,按钮是图片按钮,用审查元素的方法,找到button的name属性,在Form表单下添加下面几行代码就可以了。]



<input type="hidden" name="button" id="button" value="登陆" />
<input type='hidden' name='button.x' id='button.x' value='26' />
<input type='hidden' name='button.y' id='button.y' value='86' />



[PS:这三个的值,似乎不重要,可以随便填的]

2. ASP.net开发的网站

       为何要将Asp.net开发的网站拿出来单独说明,这和它背后的实现技术有关系,详细不说明,直接看实例。我发现博客园正好是用Asp.net开发的,所以我们就拿博客园作为实例来讲,同上面的操作一样,我们进入登录页面找到我们想要的几个元素。

       首先,我们我们写上和1类似的代码,如下



<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="txtPWD" id="tbPassword" value="password" />
</form>



运行程序,我们发现压根就没什么发现,只是进入了一个普通的登录页面而已。细心的朋友应该会发现,其源码中有几个隐藏的div层下的input,分别是__LASTFOCUS、__EVENTARGUMENT、__EVENTTARGET、__VIEWSTATE和__EVENTVALIDATION,我们在这里比较有用的就是__VIEWSTATE和__EVENTVALIDATION这两个玩意儿,所以我们得把代码做个简单的修改,修改后的代码如下所示



<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="txtPWD" id="tbPassword" value="password" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>



有人会问,这两个属性怎么传值,其实很简单,查看源代码,把我们看到的值直接复制过来就行了。OK,我们继续运行程序,发现用户名是传入了,但是还是不能进入系统中,为什么呢? 进过测试发现是按钮没有传入,所以我们接着改改代码




<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="hidden" id="tbPassword" value="password" />
    <input type="hidden" name="btnLogin" id="btnLogin" value="登陆" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>



再运行程序,就发现已经成功登录了。[PS:如果登录按钮是图片按钮,就要参考1的多说一句里面的代码来完成了]

      传入按钮的方式,除了为按钮赋值,还有一种方式,就是为我们先前提到的__EVENTTARGET,赋值为btnLogin,这个是博客园登录按钮的name值,根据实际情况我们或许需要改改其值。修改后的另外一种代码形式




<form action="" method="post" name="form1" id="form1">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="btnLogin" />
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="hidden" id="tbPassword" value="password" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>



 

3. 为了灵活性

      在项目中我们往往需要根据实际情况传入不同的值,这样我们就可以使用JS传入值,在ASP.net中,使用JS调用后台代码是很方便的,其写法形式如下



var actionUrl = "<%= this.GetActionUrl() %>"