這是后端代碼
<?php
$password=$_POST['password'];
function getRandPass(){
$chars = ("0123456789abcdefghijklmnopqrstuvwxyz");
$min = 6;//最小字?jǐn)?shù)
$max = 9;//最大字?jǐn)?shù)
$len = mt_rand($min,$max);//隨機(jī)長度
$password= '';
$a_len = strlen($chars);
for($i=0;$i<$len;$i++){
$password.= $chars[mt_rand(0,$a_len-1)];//隨機(jī)取出一個字符
}
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><!-- 用以顯示返回來的數(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)證過程
},
success: function(data){
if(data.code==1){ //驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else{
$('#texts').html('密碼錯誤！');
}
}
});
});
</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); //控制臺輸出調(diào)試結(jié)果
},
error:function(msg){
console.log(msg);//控制臺輸出錯誤調(diào)試結(jié)果
}
});
});
});
</script>
</body>
</html>
問題1，沒有保存密碼，驗(yàn)證密碼的時候又重新生成了新密碼，所以永遠(yuǎn)都是密碼錯誤
問題2，$data='{password:"' . $password. '"}'; 和 echo json_encode($data);重復(fù)，json_encode就是生成json的
問題3，ajax使用dataType: "json"時，jquery會自動解析json字符串，不需要再一次data = eval("("+msg+")");
問題4，獲取密碼的點(diǎn)擊事件中，還沒有輸入密碼呢，干嘛還要提交密碼 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ī)長度
$password = '';
$a_len = strlen($chars);
for($i = 0;$i < $len;$i++)
{
$password .= $chars[mt_rand(0,$a_len - 1)];//隨機(jī)取出一個字符
}
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><!-- 用以顯示返回來的數(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)證過程
},
success: function(data)
{
if(data.code == 1)
{
//驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else
{
$('#texts').html('密碼錯誤！');
}
}
});
});
$('#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); //控制臺輸出調(diào)試結(jié)果
},
error:function(msg)
{
console.log(msg);//控制臺輸出錯誤調(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ī)長度
$password= '';
$a_len = strlen($chars);
for($i=0;$i<$len;$i++){
$password.= $chars[mt_rand(0,$a_len-1)];//隨機(jī)取出一個字符
}
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><!-- 用以顯示返回來的數(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)證過程
},
success: function(data){
if(data.code==1){ //驗(yàn)證密碼
$('#texts').html('驗(yàn)證成功' );
}else{
$('#texts').html('密碼錯誤！');
}
}
});
});
</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); //控制臺輸出調(diào)試結(jié)果
},
error:function(msg){
console.log(msg);//控制臺輸出錯誤調(diào)試結(jié)果
}
});
});
});
</script>
</body>
</html>然后再試試，主要問題還是最后的輸出部分做了手動拼接。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合／校企合作的政策，積極推進(jìn)“中國制造2025”，實(shí)現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰，中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jī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ù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多