本案例包括login.html、login.php、jquery-1.12.0.min.js三个文件,只需将这三个文件放到同一文件夹下,即可运行。

login.html:

<!DOCTYPE html>
<html>
<head>
<title>jquery Ajax!</title>
<meta charset="utf-8">
</head>
<body>
<input name="username" type="text" placeholder="请输入用户名" value="meizi">
<input name="password" type="text" placeholder="请输入密码" value="123456">
<!-- 在login.php中默认设置用户名为:meizi,密码为:123456 -->
<p></p>
<input name="submit" type="submit" onclick="login()">

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function login(){
var username = $("input[name='username']").eq(0).val();
var password = $("input[name='password']").eq(0).val();
console.log(username + '-' + password);//方便大家查看效果,这个log我就不删除了
$.ajax({
type : "post",
url : "login.php?"+Math.random(),
data : {"username": username,"password": password},
async : true,
success: function(msg){
console.log(msg);//方便大家查看效果,这个log我就不删除了
$("p").eq(0).html(msg.msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("p").eq(0).html("连接超时!");//Ajax出错的情况下,才会出现此错误!
}
});
};
</script>
</body>
</html>

login.php:

<?php
//声明json格式与编码格式
header('Content-Type:text/json;charset=utf-8');
//1 传入用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];
//2 默认设置用户名为:meizi,密码为:123456,进行账号密码验证
if($username==="meizi" && $password==="123456"){
//建立数组,并将数组转化为json格式,作为ajax的返回值,返回给login.html
//用户名和密码验证成功,返回值如下
$test = array("msg"=>"登陆成功!","username"=>$username,"password"=>$password);
//事实上,若要进行数据库登录验证,只需在此处连接数据库,然后进行sql查询即可,但是本案例只演示jquery的Ajax,就不再涉及数据库了
echo json_encode($test);
}else{
//用户名和密码验证失败,返回值如下
$test = array("msg"=>"用户名或密码错误,请重新输入!","username"=>$username,"password"=>$password);
echo json_encode($test);
}

jquery-1.12.0.min.js见链接:https://files.cnblogs.com/files/chenyoumei/jquery-1.12.0.min.js