![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
一、学习心得
1，正式进入ajax学习阶段。
2，ajax与后台交互方法的学习，是后面学习php基础准备。
3，post方法是按照规定传入相关参数，数据以格式化传到后台对比并与服务器存储的数据做比较最终反馈结果给前端。
4，两种形式使用post方法，建议使用简洁方式。
二、学习演示截图
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJ</title>
</head>
<body>
<form method="post">
<fieldset>
<legend>用户登录</legend>
<p><label for="username">用户名：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密 码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<span id="tips" style="font-size: 1.2em;font-weight: bolder; color: red"></span><br>
<button>登录</button>
</p>
</fieldset>
</form>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button:first').click(
function(){
var url='user.php?m=login'
var data= {
'username':$('#username').val(),
'password':$('#password').val()
}
var success=function(res){
if (res=='1') {
$('#tips').text('登陆成功,跳转中')
setTimeout(function(){
location.href='index.php'
},2000)
}else{
$('#tips').text('密码错误')
$('#username').focus()
setTimeout("tips.innerHTML=''",2000)
}
}
var dataType='json'
$.post(url, data, success, datatType)
return false
// $.post(
// 'user.php?m=login',
// {
// 'username':$('#username').val(),
// 'password':$('#password').val()
// },
// function(res){
// if (res=='1') {
// $('#tips').text('登陆成功,跳转中')
// setTimeout(function(){
// location.href='index.php'
// },2000)
// }else{
// $('#tips').text('密码错误')
// $('#username').focus()
// setTimeout("tips.innerHTML=''",2000)
// }
// }
// )
// return false
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
四、手抄代码
