效果图：
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.aiax()</title>
<style type="text/css">
div {
margin: auto;
background-color: lightskyblue;
width: 400px;
height: auto;
padding: 10px;
text-align: center;
}
button {
border: none;
background-color: #1EF010;
width: 80px;
height:30px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h3>用户登录</h3>
<form>
<p>用户名: <input type="text" name="name" id="name"></p>
<p>密 码：<input type="password" name="password" id="password"></p>
<button>注册</button>
</form>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//当失去焦点时时行验证
$('#name').blur(function(){
//全部参数写到$.ajax()参数中
$.ajax({
//请求的服务器资源,必须是字符串
url: 'api/demo.php',
//客户端的请求类型:GET,POST...,推荐大写
type: 'GET',
//将表单控件内容序列化为json格式
data: $('form').serializeArray(),
//成功回调
success: function(msg,status,xhr) {
console.log(msg)
$('p span').empty()
$('p').append($(msg))
}
})
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
总结：
当失去焦点时时行验证:$(':input').blur(function(){}
全部参数写到$.ajax()参数中
$.ajax({
请求的服务器资源,必须是字符串
url: 'api/demo.php',
客户端的请求类型:GET,POST...,推荐大写
type: 'GET',
将表单控件内容序列化为json格式
data: $('form:first').serializeArray()
成功回调
success: function(msg,status,xhr) {}
})
前端的内容已经学完，收获颇多。从当初什么都知道的小白到现在的懵懵懂懂。感觉越学习越明白自己知道的太少。在学习方面没有捷径，只有多写、多看、多查，遇到错误不要放弃。不懂的内容多去查查，不熟悉的语句多去写写。自然就会了。
最近感觉自己的劲头没有刚学习的时候强烈，有些放松。还是要对自己严格要求，好好跟着老师学习。
