這是后端代碼
<?php
$password=$_POST['password'];
function getRandPass(){
$chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
$min = 6;//最小字?jǐn)?shù)
$max = 9;//最大字?jǐn)?shù)
$len = mt_rand($min,$max);//隨機(jī)長(zhǎng)度
$password= '';
$a_len = strlen($chars);
for($i=0;$i<$len;$i++){
$password.= $chars[mt_rand(0,$a_len-1)];//隨機(jī)取出一個(gè)字符
}
return $password;
}
$password=getRandPass();
if($password==$password){
$data['code'] = 1;
$data['password'] = $password;
}else{
$data['code'] = 0;
}
$data='{password:"' . $password. '"}';//組合成json格式數(shù)據(jù)
echo json_encode($data);//輸出json數(shù)據(jù)
?>
以下是前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<input type="text" id="password">
<button id="sub">獲取密碼</button>
<button id="gopass">驗(yàn)證密碼</button>
<input type="text" id="text">
<span id="texts"></span><!-- 用以顯示返回來(lái)的數(shù)據(jù),只刷新這部分地方 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('#gopass').click(function(){
var password=$('#password').val();
if(password==''){
$('#texts').html('密碼不能為空!');
return false;
}
$.ajax({
url: 'password.php',
type: 'POST',
dataType: 'json',
data: {password: password},
beforeSend: function(){
$('#texts').html('驗(yàn)證中!');//用于調(diào)試驗(yàn)證過(guò)程
},
success: function(data){
if(data.code==1){ //驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else{
$('#texts').html('密碼錯(cuò)誤!');
}
}
});
});
</script>
<script>
$(function(){
$('#sub').click(function(){
var password=$('#password').val();
$.ajax({
type: "post",
url: "password.php",
data: {password: password}, //提交到password.php的數(shù)據(jù)
dataType: "json", //回調(diào)函數(shù)接收數(shù)據(jù)的數(shù)據(jù)格式
success: function(msg){
$('#text').empty(); //清空Text里面的所有內(nèi)容
var data='';
if(msg!=''){
data = eval("("+msg+")"); //將返回的json數(shù)據(jù)進(jìn)行解析,并賦給data
}
$('#text').val(data.password); //密碼在#text中輸出
$('#texts').html('獲取成功!');
console.log(data); //控制臺(tái)輸出調(diào)試結(jié)果
},
error:function(msg){
console.log(msg);//控制臺(tái)輸出錯(cuò)誤調(diào)試結(jié)果
}
});
});
});
</script>
</body>
</html>
問(wèn)題1,沒(méi)有保存密碼,驗(yàn)證密碼的時(shí)候又重新生成了新密碼,所以永遠(yuǎn)都是密碼錯(cuò)誤
問(wèn)題2,$data='{password:"' . $password. '"}';
和 echo json_encode($data);
重復(fù),json_encode
就是生成json的
問(wèn)題3,ajax使用dataType: "json"
時(shí),jquery會(huì)自動(dòng)解析json字符串,不需要再一次data = eval("("+msg+")");
問(wèn)題4,獲取密碼的點(diǎn)擊事件中,還沒(méi)有輸入密碼呢,干嘛還要提交密碼 data: {password: password}, //提交到password.php的數(shù)據(jù)
<?php
session_start();
function getRandPass()
{
$chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
$min = 6;//最小字?jǐn)?shù)
$max = 9;//最大字?jǐn)?shù)
$len = mt_rand($min,$max);//隨機(jī)長(zhǎng)度
$password = '';
$a_len = strlen($chars);
for($i = 0;$i < $len;$i++)
{
$password .= $chars[mt_rand(0,$a_len - 1)];//隨機(jī)取出一個(gè)字符
}
return $password;
}
if(isset($_POST['password']))
{
if($_SESSION['password'] == $_POST['password'])//驗(yàn)證密碼
{
$data['code'] = 1;
}
else
{
$data['code'] = 0;
}
}
else
{
$password = getRandPass();
$_SESSION['password'] = $password;//保存密碼,以便下次驗(yàn)證密碼
$data['password'] = $password;
}
echo json_encode($data);//輸出json數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<input type="text" id="password">
<button id="sub">
獲取密碼
</button>
<button id="gopass">
驗(yàn)證密碼
</button>
<input type="text" id="text">
<span id="texts">
</span><!-- 用以顯示返回來(lái)的數(shù)據(jù),只刷新這部分地方 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$('#gopass').click(function()
{
var password = $('#password').val();
if(password == '')
{
$('#texts').html('密碼不能為空!');
return false;
}
$.ajax(
{
url: 'password.php',
type: 'POST',
dataType: 'json',
data:
{
password: password
},
beforeSend: function()
{
$('#texts').html('驗(yàn)證中!');//用于調(diào)試驗(yàn)證過(guò)程
},
success: function(data)
{
if(data.code == 1)
{
//驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else
{
$('#texts').html('密碼錯(cuò)誤!');
}
}
});
});
$('#sub').click(function()
{
var password = $('#password').val();
$.ajax(
{
type: "get",
url: "password.php",//提交到password.php的數(shù)據(jù)
dataType: "json", //回調(diào)函數(shù)接收數(shù)據(jù)的數(shù)據(jù)格式
success: function(data)
{
$('#text').empty(); //清空Text里面的所有內(nèi)容
$('#text').val(data.password); //密碼在#text中輸出
$('#texts').html('獲取成功!');
console.log(data); //控制臺(tái)輸出調(diào)試結(jié)果
},
error:function(msg)
{
console.log(msg);//控制臺(tái)輸出錯(cuò)誤調(diào)試結(jié)果
}
});
});
</script>
</body>
</html>
最終目的:獲取到的密碼和輸入的密碼進(jìn)行驗(yàn)證。
后端代碼改為
<?php
if ($_POST['action'] == 'getPassword') {
$data['password'] = getRandPass();
} else if ($_POST['action'] == 'check') {
if($_POST['password'] == $_POST['inputPassword']){
$data['code'] = 1;
}else{
$data['code'] = 0;
}
}
function getRandPass()
{
$chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
$min = 6;//最小字?jǐn)?shù)
$max = 9;//最大字?jǐn)?shù)
$len = mt_rand($min,$max);//隨機(jī)長(zhǎng)度
$password= '';
$a_len = strlen($chars);
for($i=0;$i<$len;$i++){
$password.= $chars[mt_rand(0,$a_len-1)];//隨機(jī)取出一個(gè)字符
}
return $password;
}
echo json_encode($data);//輸出json數(shù)據(jù)
?>
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<input type="text" id="password">
<button id="sub">獲取密碼</button>
<button id="gopass">驗(yàn)證密碼</button>
<input type="text" id="text">
<span id="texts"></span><!-- 用以顯示返回來(lái)的數(shù)據(jù),只刷新這部分地方 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('#gopass').click(function(){
var password=$('#password').val();
if(password==''){
$('#texts').html('密碼不能為空!');
return false;
}
$.ajax({
url: 'password.php',
type: 'POST',
dataType: 'json',
data: {action:'check',password: password,inputPassword:$('#text').val()},
beforeSend: function(){
$('#texts').html('驗(yàn)證中!');//用于調(diào)試驗(yàn)證過(guò)程
},
success: function(data){
if(data.code==1){ //驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else{
$('#texts').html('密碼錯(cuò)誤!');
}
}
});
});
</script>
<script>
$(function(){
$('#sub').click(function(){
var password=$('#password').val();
$.ajax({
type: "post",
url: "password.php",
data: {action:'getPassword', password: password}, //提交到password.php的數(shù)據(jù)
dataType: "json", //回調(diào)函數(shù)接收數(shù)據(jù)的數(shù)據(jù)格式
success: function(msg){
$('#text').empty(); //清空Text里面的所有內(nèi)容
var data='';
if(msg!=''){
data = eval("("+msg+")"); //將返回的json數(shù)據(jù)進(jìn)行解析,并賦給data
}
$('#text').val(data.password); //密碼在#text中輸出
$('#texts').html('獲取成功!');
console.log(data); //控制臺(tái)輸出調(diào)試結(jié)果
},
error:function(msg){
console.log(msg);//控制臺(tái)輸出錯(cuò)誤調(diào)試結(jié)果
}
});
});
});
</script>
</body>
</html>
然后再試試,主要問(wèn)題還是最后的輸出部分做了手動(dòng)拼接。
北大青鳥(niǎo)APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國(guó)IT技能型緊缺人才,是大數(shù)據(jù)專(zhuān)業(yè)的國(guó)家
北大青鳥(niǎo)中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過(guò)二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國(guó)一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國(guó)成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開(kāi)發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺(tái)面向?qū)ο箝_(kāi)發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫(kù),具有快速界面開(kāi)發(fā)的能力,對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁(yè)制作和網(wǎng)頁(yè)游戲開(kāi)發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國(guó)Software AG 技術(shù)顧問(wèn),美國(guó)Dachieve 系統(tǒng)架構(gòu)師,美國(guó)AngelEngineers Inc. 系統(tǒng)架構(gòu)師。