1. 程式人生 > >註冊例項:JQuery ajax json php接收並返回值,根據設定值判斷註冊是否成功

註冊例項:JQuery ajax json php接收並返回值,根據設定值判斷註冊是否成功

思路:PHP註冊成功後,給一個變數值,並把這個變數值返回到註冊HTML網頁,讓JS判斷是否等於設定的值,如果等於就是註冊成功

html程式碼:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajaxTest</title>
</head>
<body>
    <input type="text" id="username">
    <input type="text" id="password">
    <button id="sub">註冊</button>
    <span id="text"></span>
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
  $(function(){
			$('#sub').click(function(){
			  var username=$('#username').val();
			  var password=$('#password').val();
					  $.ajax({
						type: "post",
						url: "03.php",
						data: {username:username,password:password},//提交到demo.php的資料
						dataType: "json",//回撥函式接收資料的資料格式
								success: function(msg){
						
											  var data='';
											  if(msg!=''){
												data = eval("("+msg+")");
											  }
											  if(data.su=='success'){
												  $('#text').html("使用者名稱為:" + data.username + ",密碼為:" + data.password + ",成功:" + data.su);
											  }else{
												  $('#text').html("使用者名稱為:" + data.username + ",密碼為:" + data.password + ",失敗:" + data.su);
											  }
											  console.log(data);
								},
								error:function(msg){
											console.log(msg);
								}
					  });
			})
  })
</script>
</html>


03.php程式碼

<?php
	header('Content-type:text/json;charset=utf-8');
    $username=$_POST['username'];
    $password=$_POST['password'];
	
	//也可以在成功插入資料庫後再賦值success  在這裡不具體寫出來,只是做一個簡單判斷後賦值
	if($username=="" || $password==""){
		$su="";
	}else{
		$su="success";//給su賦值“success”;
	}
    
   $data='{su:"' . $su .'"}';//只返回su變數值來判斷是否註冊成功,其它值不返回
   //$data='{username:"' . $username . '",password:"' . $password .'",su:"' . $su .'"}';//所有值都返回
   echo json_encode($data);
?>