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);
?>
转载于:https://www.cnblogs.com/litao666/p/6070408.html
AJAX04 JQ的AJAX相关推荐
- axios如何在nodejs项目里封装_【面经】jq 中 ajax 和 axios 区别,瀑布流布局,添加删除事件...
[jq 中 ajax 和 axios 区别] jq的ajax 1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮 2.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery不合理 a ...
- jquery中ajax完整例子get,jq的ajax方法,jquery中ajax完整例子
jq的ajax方法,jquery中ajax完整例子 相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and X ...
- ajax ssm 页面跳转_SSM用jq整合Ajax入门案例讲解
SSM用Jq整合Ajax 我就是一个程序小白,很多原理都不懂,下面的内容只能让新手知道怎么用. Ajax 废话少说,总之像点赞,评论,之类的很多功能没必要进行页面跳转,更没必要牺牲整个页面来刷新局部区 ...
- jq请求Ajax数据
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>jq请 ...
- 手把手教你用JQ调用ajax(附免费永久后台URL)
关于jQ的Ajax操作 前沿 关于AJAX(百度百科) JQ调用AJAX实例 1.jQuery的load()方法 2.jquery的getJSON方法 3.jquery的$.get()方法 4.jqu ...
- 什么是ajax,一篇文章带你了解ajax(JQ的ajax封装讲解)
一:什么是ajax ajax是异步编程,可以让用户不用刷新页面就可以访问到服务器的数据,比如我们常见的今日头条,打开一个页面他页面中的数据并不是很多,但是我们在不停向下滚动的时候,我们并没有刷新页面, ...
- jq的ajax和模块引擎
之前我们写ajax都是用原生js写的,但这样写有时候就显得有点繁琐,其实我们也可以用jq来写,这样更简单,但jq写法跟原生的有点不一样,他可以分为单个类型,和一个总的: 第一种是$.get: 第二种是 ...
- HTML_简单JQ的AJAX响应式交互
AJAX技术是动态交互式技术,基于jq实现! AJAX是不需要刷新页面就可以达到更新页面的方式,类似Windows下的局部刷新机制! 以往的HTMLget请求一个文件时,获取到了文件内容然后需要刷新才 ...
- jq的ajax上传文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 解决mysql“Access denied for user‘root‘@‘IP地址‘“问题
- python有哪些作用-Python都有哪些强大的功能
- 跟我学 Java 8 新特性之 Stream 流(六)收集
- matlab 安装glpk,mac上安装GLPK
- 【机器视觉学习笔记】最近邻插值实现图片任意角度旋转(C++)
- mysql.data.dll win10_【MySQL】Windows10下安装
- 考研编程练习----畅通工程
- 使用java实现打印功能_java实现打印功能有没有比较好的方式?
- gensim读取已训练模型LDA模型的模型与dictionary
- 数据结构 创建顺序栈
- 【报告分享】5G零售行业应用白皮书.pdf(附下载链接)
- WinSCP 连接 Ubuntu 拒绝的问题
- 电脑C盘的大小影响电脑正常使用吗?
- 吝啬SAT问题是NP完全问题的证明
- Premiere Pro CC2019安装详细教程
- 北大核心期刊2020_职称期刊论文发表 | 会计如何发表北大核心论文
- Codeforces Round #829 cf1753A Cowardly Rooks
- MySQL死锁问题如何分析锁表后查看死锁和去除死锁快速解决方法
- 电力电子应用技术的matlab仿真
- 那些年我们玩过的Spark下的Standalone集群模型
热门文章
- Android开发手记(23) Notification
- Ubuntu 通过Deb 安装 MySQL 5.5 [转载]
- 在delphi中嵌入腳本語言--(譯)RemObjects Pascal Script使用說明(1)(譯)
- java 文件压缩_java实现文件压缩
- 基于tensorflow实现图像分类——理解神经网络运作过程、tensorflow入门
- FPGA存储器DDR5简介
- lamp 重启mysql_lamp常用命令 --Ubuntu下启动/重启/停止apache,mysql服务器
- 卡尔曼滤波算法-简易版
- 2021.C/C++静态代码分析工具
- 【好文链接】从原理上搞懂PID