# JQueryAjax+PHP入门详解
```
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<center>
用户名:<input type="text" id="user" name="username" /><br>
密码:<input type="password" id="pass" name="password" /><br>
<div class="divbtn">
<button type="button" class="btn">ajax提交</button><br>
</div>
</center>
<span class="con"></span>
<script type="text/javascript">
//方法一
$(function(){
$(".btn").click(function(){
var user = $('#user').val();//获取表单信息
var pass = $("#pass").val();
if(user == ''){
//设置提示,添加一个提示框div,提示信息为html(),追加在class="divbtn"后面,3秒后消失
$("<div id='msg'>").html('用户名不能为空').appendTo(".divbtn").fadeOut(3000)
//在出错的这行获取焦点(光标会停在这里)
$("#user").focus();
return false;
}
if(pass == ''){
//设置提示,添加一个提示框div,提示信息为html(),追加在class="divbtn"后面,3秒后消失
$("<div id='msg'>").html('密码不能为空').appendTo(".divbtn").fadeOut(3000)
//在出错的这行获取焦点(光标会停在这里)
$("#pass").focus();
return false;
}
//将数据传递到后端
$.ajax({
url:'log.php',//请求的控制器地址
type:'post', //发送数据的方式
data:{"user":user,"pass":pass}, //json格式的数据
dataType:'json', //数据返回的格式
success:function(res){ //发送成功后执行的回调函数 res为请求的返回的数据(json格式才能接收)
if(res.success == 1){//返回值等于1为成功
//将返回的信息展示
var res.msg; //msg为后端返回的数据变量
}
}
})
})
})
/*方法二:
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.post('ajax.php',{name:username,pwd:password},function(data) {
alert(data);
$(".con").html(data);
})
})
alert(111)
}) */
</script>
</body>
</html>
```
