這是后端代碼
<?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)拼接。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國(guó)IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國(guó)家
北大青鳥中博軟件學(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
浪潮集團(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)突出、引人入勝。
曾工作于聯(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é)及管理工作。
精通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)師。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多