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.模板案例：

  

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Ajax</title>
  6. <style>
  7. body {
  8. margin:0;
  9. padding:0;
  10. background-color:#F7F7F7;
  11. }
  13. h3 {
  14. text-align: center;
  15. }
  17. .chatbox {
  18. width:500px;
  19. height:500px;
  20. margin:0auto;
  21. border:1px solid #CCC;
  22. background-color:#FFF;
  23. border-radius:5px;
  24. }
  26. .messages {
  27. height:350px;
  28. padding:20px40px;
  29. box-sizing: border-box;
  30. border-bottom:1px solid #CCC;
  31. overflow: scroll;
  32. }
  34. .messages h5 {
  35. font-size:20px;
  36. margin:10px0;
  37. }
  39. .messages p {
  40. font-size:18px;
  41. margin:0;
  42. }
  44. .self{
  45. text-align: left;
  46. }
  48. .other {
  49. text-align: right;
  50. }
  52. .form {
  53. height:150px;
  54. }
  56. .form .input {
  57. height:110px;
  58. padding:10px;
  59. box-sizing: border-box;
  60. }
  62. .form .btn {
  63. height:40px;
  64. box-sizing: border-box;
  65. border-top:1px solid #CCC;
  66. }
  68. .form textarea {
  69. display: block;
  70. width:100%;
  71. height:100%;
  72. box-sizing: border-box;
  73. border: none;
  74. resize: none;
  75. outline: none;
  76. font-size:20px;
  77. }
  79. .form input {
  80. display: block;
  81. width:100px;
  82. height:30px;
  83. margin-top:5px;
  84. margin-right:20px;
  85. float: right;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <h3>简单的Ajax实例</h3>
  91. <divclass="chatbox">
  92. <divclass="messages">
  93. </div>
  94. <divclass="form">
  95. <divclass="input">
  96. <textarea></textarea>
  97. </div>
  98. <divclass="btn">
  99. <inputtype="button"value="发送">
  100. </div>
  101. </div>
  102. </div>
  103. <scriptsrc="js/jquery.min.js"></script>
  104. <scriptsrc="js/template-native.js"></script>
  105. <script>
  106. // 1.准备模板
  107. // 2.准备对象数据
  108. var data={};
  109. var html='';
  110. var omessages=$('.messages');
  111. $('.btn input').on('click',function(){
  112. // 我说
  113. var selfResult=$('.input textarea').val();
  114. data={
  115. flag:"self",
  116. text:selfResult
  117. }
  118. // 拼装
  119. html=template('tmpl',data);
  120. // console.log(html);
  121. omessages.append(html);
  122. $('.input textarea').val('');
  123. // 对方说
  124. $.ajax({
  125. type:'post',
  126. url:'chat.php',
  127. data:null,
  128. success:function(result){
  129. data={
  130. flag:'other',
  131. text:result
  132. }
  133. html=template('tmpl',data);
  134. omessages.append(html);
  135. }
  139. })
  140. })
  143. </script>
  144. <!--
  147. // 1.准备模板
  148. <div class="self">
  149. <h5>我说</h5>
  150. <p>你好</p>
  151. </div>
  152. <div class="other">
  153. <h5>对方说</h5>
  154. <p>你好</p>
  155. </div>-->
  156. <!--假设要输出<%=%>-->
  157. <!--flag做判断-->
  158. <scripttype="text/template"id='tmpl'>
  159. <div class="<%= flag %>">
  160. <%if(flag=="self"){%>
  161. <h5>我说</h5>
  162. <%}else{%>
  163. <h5>对方说</h5>
  164. <%}%>
  165. <p><%= text %></p>
  166. </div>
  167. </script>
  168. </body>
  169. </html>
  1. <?php
  2. $messages = array(
  3. '我在睡觉',
  4. '你要干嘛小帅哥',
  5. '小帅哥来嘛',
  6. '大爷来爽爽',
  7. '啵啵啵'
  8. );
  10. echo $messages[array_rand($messages)];
  12. sleep(1);
  13. ?>
 

简单的表单验证案例

  1. <!DOCTYPE html>
  2. <htmllang="en">
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>jQuery Ajax</title>
  7. <style>
  8. body {
  9. margin:0;
  10. padding:0;
  11. background-color:#F7F7F7;
  12. }
  14. ul {
  15. margin:0;
  16. padding:50px;
  17. list-style: none;
  18. }
  20. .register{
  21. width:800px;
  22. margin:50pxauto;
  23. background-color:#FFF;
  24. border:1px solid #CCC;
  25. border-radius:5px;
  26. }
  28. li {
  29. display: flex;
  30. margin:20px0;
  31. }
  33. label,
  34. input {
  35. display: block;
  36. float: left;
  37. height:46px;
  38. font-size:24px;
  39. box-sizing: border-box;
  40. color:#333;
  41. }
  43. label {
  44. width:200px;
  45. line-height:46px;
  46. margin-right:30px;
  47. text-align: right;
  48. }
  50. input {
  51. width:320px;
  52. padding:8px;
  53. line-height:1;
  54. outline: none;
  55. position: relative;
  56. }
  58. input.code {
  59. width:120px;
  60. }
  62. input.verify {
  63. width:190px;
  64. margin-left:10px;
  65. }
  67. input.disabled {
  68. background-color:#CCC !important;
  69. }
  71. input[type=button]{
  72. border: none;
  73. color:#FFF;
  74. background-color:#E64145;
  75. border-radius:4px;
  76. cursor: pointer;
  77. }
  79. .tips {
  80. position:fixed;
  81. top:0;
  82. width:100%;
  83. height:40px;
  84. text-align: center;
  85. }
  87. .tips p {
  88. min-width:300px;
  89. max-width:400px;
  90. line-height:40px;
  91. margin:0auto;
  92. color:#FFF;
  93. display: none;
  94. background-color:#C91623;
  95. }
  96. </style>
  97. </head>
  99. <body>
  100. <divclass="register">
  101. <formid="ajaxForm">
  102. <ul>
  103. <li>
  104. <labelfor="">用户名</label>
  105. <inputtype="text"name="name"class="name">
  106. </li>
  107. <li>
  108. <labelfor="pass">请设置密码</label>
  109. <inputtype="password"name="pass"class="pass">
  110. </li>
  111. <li>
  112. <labelfor="re">请确认密码</label>
  113. <inputtype="password"name="repass"class="repass">
  114. </li>
  115. <li>
  116. <labelfor="">验证手机</label>
  117. <inputtype="text"name="mobile"class="mobile">
  118. </li>
  119. <li>
  120. <labelfor="">短信验证码</label>
  121. <inputtype="text"name="code"class="code">
  122. <inputtype="button"value="获取验证码"class="verify">
  123. </li>
  124. <li>
  125. <labelfor=""></label>
  126. <inputtype="button"value="立即注册"class="submit">
  127. </li>
  128. </ul>
  129. </form>
  130. </div>
  131. <!--提示信息-->
  132. <divclass="tips">
  133. <p>用户名不能为空</p>
  134. </div>
  135. <scriptsrc='js/jquery.min.js'></script>
  136. <script>
  137. // 1.注册
  138. // 01.获取注册按钮&02.给注册按钮绑定事件
  139. $('.submit').on('click',function(){
  140. var formData=$('#ajaxForm').serialize();
  141. // 把this缓存起来
  142. var _this=$(this);
  143. // 4.当发生一次提交，过程中就禁止提交了 (禁止多次点击)
  144. if(_this.hasClass("disabled")){
  145. // 禁止提交
  146. returnfalse;
  147. }
  148. // 03.发起ajax请求
  149. $.ajax({
  150. type:'post',
  151. url:'register.php',
  152. data:formData,
  153. //前端校验
  154. beforeSend:function(){
  155. // 0.当用户名为空的时候， 提示用户名为空 不发送请求
  156. if($('.name').val()==''){
  157. $('.tips p').text('用户名不能为空')
  158. .fadeIn(500)
  159. .delay(1500)
  160. .fadeOut(500);
  161. returnfalse;
  162. }
  163. // 2.当两次密码不一致的时候，提示密码不一致 不能提交
  164. if($('.pass').val()!=$('.repass').val()||$('.pass').val()==''){
  165. // 123 1234
  166. // 空 1234
  167. // 1.输入密码和确认密码其中有一个是写的
  168. // 2.两个都写 ，内容不一直
  169. $('.tips p').text('密码错误或不一致')
  170. .fadeIn(500)
  171. .delay(1500)
  172. .fadeOut(500);
  173. returnfalse;
  174. }
  175. // 3.当提交过程中，提交按钮文字变成...提交中 背景色编程灰色
  176. _this.val('...提交中').addClass('disabled');
  177. },
  178. //请求成功返回结果
  179. success:function(result){
  180. // 1.当用户输入用户名，后台能拿到，前端验证是否等于用户输入的用户名，
  181. // 如果等于，就代表注册成功
  182. // console.log(result);
  183. var obj=JSON.parse(result);
  184. console.log(obj);
  185. // 输出用户名
  186. console.log(obj['msg']);
  187. // console.log(obj['result']['name']);
  188. $('.tips p').text(obj['msg'])
  189. .fadeIn(500)
  190. .delay(1500)
  191. .fadeOut(500);
  193. },
  194. //发生错误的时候，预报信息
  195. error:function(err){},
  196. //完成时状态还原
  197. complete:function(){
  198. // 5.当请求完成时，按钮接着变回原样
  199. _this.val('立即注册').removeClass('disabled');
  200. }
  201. })
  202. })
  204. // 5.当不输入的时候或手机格式错误的时候，都提示手机格式错误
  205. // 步骤: 1.获取获取验证码的按钮// 2.注册点击事件
  206. $('.verify').on('click',function(){
  207. // 3.发起请求
  208. var _mobileNumber=$('.mobile').val();
  209. var regMobile=/^1\d{10}$/;// 以1开头 等于11位
  210. var _this=$(this);
  211. $.ajax({
  212. type:'post',
  213. url:'getCode.php',
  214. data:{phoneNumber:_mobileNumber},
  215. beforeSend:function(){
  216. // 5.当不输入的时候或手机格式错误的时候，都提示手机格式错误
  217. if(!regMobile.test(_mobileNumber)||_mobileNumber==''){
  218. $('.tips p').text('手机号码有误')
  219. .fadeIn(500)
  220. .delay(1500)
  221. .fadeOut(500);
  222. returnfalse;
  223. }
  224. // 6.当输入手机号，点击获取验证码的时候，出现倒计时，获取验证码按钮变成灰色
  225. // _this.val(""+"秒后重新获取").addClass('disabled');
  227. var second=10;
  228. var t=setInterval(function(){
  229. _this.val(second--+"秒后重新获取").addClass('disabled');
  230. if(second<0){
  231. clearInterval(t);
  232. _this.val("获取验证码").removeClass('disabled');
  233. }
  234. },1000)
  235. },
  236. success:function(result){
  237. // 7.当输入正确的手机号，要返回一个验证码
  238. console.log(result);
  239. },
  240. complete:function(){}
  241. })
  242. })
  246. </script>
  247. </body>
  249. </html>
  1. <?php
  2. header('Content-Type:text/html;charset=utf-8');
  3. // 服务端验证
  4. if($_POST['name']){
  5. // 只要有一个表单项填写了内容，即认为注册成功
  6. $arr = array(
  7. 'code'=>10000,
  8. 'msg'=>'注册成功,恭喜 '.$_POST['name'].'用户。',
  9. 'result'=>array('name'=>$_POST['name'])
  10. );
  11. }else{
  12. $arr = array(
  13. 'code'=>10002,
  14. 'msg'=>'注册失败',
  15. 'result'=>'一些信息'
  16. );
  17. }
  18. /**
  19. * 接口化开发
  20. * 前后端会事先约定传递的参数格式，以及返回的数据格式
  21. */
  22. echo json_encode($arr);
  24. sleep(3);
  26. ?>
 





posted @ 2016-11-16 17:16  水清风i  阅读(270)  评论(0)    收藏  举报