# 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>
```
