用ajax去做图片验证码登录

下面是view()代码
<script src="~/Scripts/jquery-1.10.2.js"></script>


@*以下就是图片验证码;用户名、密码、及验证码*@

 

<script language="javascript" type="text/javascript">

var code; //在全局 定义验证码
function createCode() {
code = new Array();
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 32);
code += selectChar[charIndex];
}
if (code.length != codeLength) {
createCode();
}
checkCode.value = code;
}
//登录验证
function deng()
{

var inputCode = document.getElementById("input1").value.toUpperCase();
//判断验证码是否正确,是否有值
if (inputCode.length <= 0) {
alert("请输入验证码!");
return false;
}
else if (inputCode != code)
{
alert("验证码输入错误!");
createCode();
return false;
}
else
{
$.ajax({
url: "/Zhou/Info",
data: {
name: $("#name").val(),
pwd: $("#pwd").val(),
},
dataType: "json",
type: "post",
success: function (data) {
if (data > 0) {
alert("登录成功");
location.href = '/Zhou/Show';
}
else
{
alert("没有此用户")
}
}
})
}



}
</script>

 

<h2>登录</h2>
<table>
<tr>
<td>用户名:</td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="pwd" type="text" /></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" id="input1" class="iid" /> <input id="checkCode" style="width:60px" class="code" type="button" value="button" onClick="createCode()" /></td>

</tr>
<tr>
<td><input id="Button1" type="button" value="登录" onclick="deng()"/>

</td>
</tr>
</table>

 

控制器的话不用,也不需要创建文件夹

 

posted @ 2018-12-20 18:48  一路高歌丶  阅读(1151)  评论(0编辑  收藏  举报