AJAX04 JQ的AJAX
一、jQuery中的Ajax
1.jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize() 序列化表单(即格式化key=val&key=val)
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用(包括成功和失败)
重要
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$.ajaxSetup 设置公共的默认的ajax数据配置
$(form表单元素).serialize(); 序列化表单数据
beforeSend: 在发起请求前执行
success : 请求成功时执行
error : 错误的时候执行
complete : 请求完成时执行(无论成功与否)
type:请求方式
url :地址
data:请求数据
dataType:预期服务器给我们返回的数据格式 xml text json script等
timeout:请求超时 单位是ms 多少毫秒以内请求算成功,超过时间就不请求了
jQuery Ajax介绍
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
2.案例练习
1、Loading状态
2、禁止重复提交
3、表单处理
4、数据验证
接口化开发
请求地址即所谓的接口,通常我们所说的接口化开发,其实是指一个接口对应一个功能,并且严格约束了请求参数和响应结果的格式,这样前后端在开发过程中,可以减少不必要的讨论,从而并行开发,可以极大的提升开发效率,另外一个好处,当网站进行改版后,服务端接口只需要进行微调。
二、模板引擎
1.原理剖析
其本质是利用正则表达式,替换模板当中预先定义好的标签。
正则表达式exec用法
http://www.w3school.com.cn/jsref/jsref_exec_regexp.asp
2. 流行模板引擎
BaiduTemplate:http://tangram.baidu.com/BaiduTemplate/
ArtTemplate:https://github.com/aui/artTemplate
velocity.js:https://github.com/shepherdwind/velocity.js/
Handlebars:http://handlebarsjs.com/
http://blog.jobbole.com/56689/
3.artTemplate
1、引入template-native.js
2、<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式
3、<%= content %>为输出表达式
案例介绍
1.模板案例:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Ajax</title>
<style>
body {
margin:0;
padding:0;
background-color:#F7F7F7;
}
h3 {
text-align: center;
}
.chatbox {
width:500px;
height:500px;
margin:0auto;
border:1px solid #CCC;
background-color:#FFF;
border-radius:5px;
}
.messages {
height:350px;
padding:20px40px;
box-sizing: border-box;
border-bottom:1px solid #CCC;
overflow: scroll;
}
.messages h5 {
font-size:20px;
margin:10px0;
}
.messages p {
font-size:18px;
margin:0;
}
.self{
text-align: left;
}
.other {
text-align: right;
}
.form {
height:150px;
}
.form .input {
height:110px;
padding:10px;
box-sizing: border-box;
}
.form .btn {
height:40px;
box-sizing: border-box;
border-top:1px solid #CCC;
}
.form textarea {
display: block;
width:100%;
height:100%;
box-sizing: border-box;
border: none;
resize: none;
outline: none;
font-size:20px;
}
.form input {
display: block;
width:100px;
height:30px;
margin-top:5px;
margin-right:20px;
float: right;
}
</style>
</head>
<body>
<h3>简单的Ajax实例</h3>
<divclass="chatbox">
<divclass="messages">
</div>
<divclass="form">
<divclass="input">
<textarea></textarea>
</div>
<divclass="btn">
<inputtype="button"value="发送">
</div>
</div>
</div>
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/template-native.js"></script>
<script>
// 1.准备模板
// 2.准备对象数据
var data={};
var html='';
var omessages=$('.messages');
$('.btn input').on('click',function(){
// 我说
var selfResult=$('.input textarea').val();
data={
flag:"self",
text:selfResult
}
// 拼装
html=template('tmpl',data);
// console.log(html);
omessages.append(html);
$('.input textarea').val('');
// 对方说
$.ajax({
type:'post',
url:'chat.php',
data:null,
success:function(result){
data={
flag:'other',
text:result
}
html=template('tmpl',data);
omessages.append(html);
}
})
})
</script>
<!--
// 1.准备模板
<div class="self">
<h5>我说</h5>
<p>你好</p>
</div>
<div class="other">
<h5>对方说</h5>
<p>你好</p>
</div>-->
<!--假设要输出<%=%>-->
<!--flag做判断-->
<scripttype="text/template"id='tmpl'>
<div class="<%= flag %>">
<%if(flag=="self"){%>
<h5>我说</h5>
<%}else{%>
<h5>对方说</h5>
<%}%>
<p><%= text %></p>
</div>
</script>
</body>
</html>
<?php
- $messages = array(
'我在睡觉',
'你要干嘛小帅哥',
'小帅哥来嘛',
'大爷来爽爽',
'啵啵啵'
);
echo $messages[array_rand($messages)];
sleep(1);
- ?>
简单的表单验证案例
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>jQuery Ajax</title>
<style>
body {
margin:0;
padding:0;
background-color:#F7F7F7;
}
ul {
margin:0;
padding:50px;
list-style: none;
}
.register{
width:800px;
margin:50pxauto;
background-color:#FFF;
border:1px solid #CCC;
border-radius:5px;
}
li {
display: flex;
margin:20px0;
}
label,
input {
display: block;
float: left;
height:46px;
font-size:24px;
box-sizing: border-box;
color:#333;
}
label {
width:200px;
line-height:46px;
margin-right:30px;
text-align: right;
}
input {
width:320px;
padding:8px;
line-height:1;
outline: none;
position: relative;
}
input.code {
width:120px;
}
input.verify {
width:190px;
margin-left:10px;
}
input.disabled {
background-color:#CCC !important;
}
input[type=button]{
border: none;
color:#FFF;
background-color:#E64145;
border-radius:4px;
cursor: pointer;
}
.tips {
position:fixed;
top:0;
width:100%;
height:40px;
text-align: center;
}
.tips p {
min-width:300px;
max-width:400px;
line-height:40px;
margin:0auto;
color:#FFF;
display: none;
background-color:#C91623;
}
</style>
</head>
<body>
<divclass="register">
<formid="ajaxForm">
<ul>
<li>
<labelfor="">用户名</label>
<inputtype="text"name="name"class="name">
</li>
<li>
<labelfor="pass">请设置密码</label>
<inputtype="password"name="pass"class="pass">
</li>
<li>
<labelfor="re">请确认密码</label>
<inputtype="password"name="repass"class="repass">
</li>
<li>
<labelfor="">验证手机</label>
<inputtype="text"name="mobile"class="mobile">
</li>
<li>
<labelfor="">短信验证码</label>
<inputtype="text"name="code"class="code">
<inputtype="button"value="获取验证码"class="verify">
</li>
<li>
<labelfor=""></label>
<inputtype="button"value="立即注册"class="submit">
</li>
</ul>
</form>
</div>
<!--提示信息-->
<divclass="tips">
<p>用户名不能为空</p>
</div>
<scriptsrc='js/jquery.min.js'></script>
<script>
// 1.注册
// 01.获取注册按钮&02.给注册按钮绑定事件
$('.submit').on('click',function(){
var formData=$('#ajaxForm').serialize();
// 把this缓存起来
var _this=$(this);
// 4.当发生一次提交,过程中就禁止提交了 (禁止多次点击)
if(_this.hasClass("disabled")){
// 禁止提交
returnfalse;
}
// 03.发起ajax请求
$.ajax({
type:'post',
url:'register.php',
data:formData,
//前端校验
beforeSend:function(){
// 0.当用户名为空的时候, 提示用户名为空 不发送请求
if($('.name').val()==''){
$('.tips p').text('用户名不能为空')
.fadeIn(500)
.delay(1500)
.fadeOut(500);
returnfalse;
}
// 2.当两次密码不一致的时候,提示密码不一致 不能提交
if($('.pass').val()!=$('.repass').val()||$('.pass').val()==''){
// 123 1234
// 空 1234
// 1.输入密码和确认密码其中有一个是写的
// 2.两个都写 ,内容不一直
$('.tips p').text('密码错误或不一致')
.fadeIn(500)
.delay(1500)
.fadeOut(500);
returnfalse;
}
// 3.当提交过程中,提交按钮文字变成...提交中 背景色编程灰色
_this.val('...提交中').addClass('disabled');
},
//请求成功返回结果
success:function(result){
// 1.当用户输入用户名,后台能拿到,前端验证是否等于用户输入的用户名,
// 如果等于,就代表注册成功
// console.log(result);
var obj=JSON.parse(result);
console.log(obj);
// 输出用户名
console.log(obj['msg']);
// console.log(obj['result']['name']);
$('.tips p').text(obj['msg'])
.fadeIn(500)
.delay(1500)
.fadeOut(500);
},
//发生错误的时候,预报信息
error:function(err){},
//完成时状态还原
complete:function(){
// 5.当请求完成时,按钮接着变回原样
_this.val('立即注册').removeClass('disabled');
}
})
})
// 5.当不输入的时候或手机格式错误的时候,都提示手机格式错误
// 步骤: 1.获取获取验证码的按钮// 2.注册点击事件
$('.verify').on('click',function(){
// 3.发起请求
var _mobileNumber=$('.mobile').val();
var regMobile=/^1\d{10}$/;// 以1开头 等于11位
var _this=$(this);
$.ajax({
type:'post',
url:'getCode.php',
data:{phoneNumber:_mobileNumber},
beforeSend:function(){
// 5.当不输入的时候或手机格式错误的时候,都提示手机格式错误
if(!regMobile.test(_mobileNumber)||_mobileNumber==''){
$('.tips p').text('手机号码有误')
.fadeIn(500)
.delay(1500)
.fadeOut(500);
returnfalse;
}
// 6.当输入手机号,点击获取验证码的时候,出现倒计时,获取验证码按钮变成灰色
// _this.val(""+"秒后重新获取").addClass('disabled');
var second=10;
var t=setInterval(function(){
_this.val(second--+"秒后重新获取").addClass('disabled');
if(second<0){
clearInterval(t);
_this.val("获取验证码").removeClass('disabled');
}
},1000)
},
success:function(result){
// 7.当输入正确的手机号,要返回一个验证码
console.log(result);
},
complete:function(){}
})
})
</script>
</body>
</html>
<?php
header('Content-Type:text/html;charset=utf-8');
// 服务端验证
if($_POST['name']){
// 只要有一个表单项填写了内容,即认为注册成功
$arr = array(
'code'=>10000,
'msg'=>'注册成功,恭喜 '.$_POST['name'].'用户。',
'result'=>array('name'=>$_POST['name'])
);
}else{
$arr = array(
'code'=>10002,
'msg'=>'注册失败',
'result'=>'一些信息'
);
}
/**
* 接口化开发
* 前后端会事先约定传递的参数格式,以及返回的数据格式
*/
echo json_encode($arr);
sleep(3);
?>