index.html内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
ul{
list-style: none;
}
</style>
</head>
<body>
<h2>User Login</h2>
<ul>
<li>Username</li>
<li><input type="text" name="username" id="username" placeholder="please enter username" class="ipt-style" /></li>
<li>Password</li>
<li><input type="password" name="password" id="password" placeholder="plaease enter password" class="ipt-style" /></li>
<li><input type="button" name="ajaxBtn" id = "ajaxBtn" value="ajaxLogin" /></li>
</ul>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ajaxBtn").click(function(){
$.getJSON("index.php",$(".ipt-style").serialize(),function(res){
console.log(res);
});
});
});
</script>
</body>
</html>
index.php内容如下:
<?php
header("Content-type:text/html;charset=utf-8");
$username = $_GET['username'];
$password = $_GET['password'];
$res = array('code'=>1,'msg'=>'','data'=>[]);
if($username == 'ceshi' && $password == '123456'){
$res['msg'] = "success";
}else{
$res['code'] = 0;
$res['msg'] = 'fail';
}
echo json_encode($res);