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


<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);
?>

来自为知笔记(Wiz)