jquery中的ajax实例教程

jquery中的ajax实例教程,第1张

  jQuery

  jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

  jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

  jquery中的ajax实例教程,jquery中的ajax实例教程,第2张

  ajax

  Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML,浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合,因此必须理解如何才能最好的使用这些技术。

  综合各种变化的技术和强耦合的客户服务端环境,Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构,这限制了应用层次之间的边界。同时,开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。最重要的是,Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。

  JQuery中ajax的简单使用教程

  当接触一项新技术时,首先我们要问自己四个问题,如果这四个问题我们都能学习并理解到位,那么可以说这个新技术你已经完成了初步掌握,下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使用教程,相信你对ajax已经有了一个基础了解。那么可以直接看第四部分,以便节约您的时间。

  一,ajax是什么?

  AJAX = 异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

  二,ajax用在哪里?

  简单说是需要连接数据库的地方,但是连接数据库传输的信息量很少,用不着刷新整个页面,这种类型的适合用ajax,避免了属性整个页面带来的资源浪费。

  三,为什么要使用ajax?

  减轻服务器的负担,按需取数,可以最大程度的减少冗余请求和响应对服务造成的负担。无恻新更新页面,减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和速写的负担,节约空间和宽带租用成本。可以调用外部数据。基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。进一步促进页面呈现和数据的分离。

  四,怎么使用在JS中使用ajax?使用时我们要了解的基础知识

  1,JQuery是什么东西?

  是一个JavaScript类库,封装了大量的JavaScript底层代码。

  2,JQuery的Ajax *** 作,对JavaScript底层Ajax *** 作进行了封装,提供了两种方法进行 *** 作

  第一种是底层的$.ajax() *** 作

  [html] view plain copy$.ajax({

  url:“url”,

  type:“get”,

  dataType:“json”,

  data:{

  userID:“1”

  },

  success:funcTIon(response){

  },

  error:funcTIon() {

  }

  });

  [html] view plain copy

  第二种是快捷 *** 作$.get()。.$.post()。。。

  [html] view plain copy$.get(

  “url”,

  {userID:“123”},

  funcTIon(response) {

  }

  )

  [html] view plain copy$.post(

  “url”,

  {userID:“123”},

  funcTIon(response) {

  }

  )

  简单实例

  [html] view plain copy《!DOCTYPE html》

  《html lang=“en”》

  《head

  《meta charset=“UTF-8”》

  《title》Title《/title》

  《link rel=“stylesheet” href=“js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css”》

  《script src=“js/lib/jquery2.2.4/jquery-2.2.4.js”》《/script》

  《script src=“js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js”》《/script》

  《style》

  .thumbnail{

  max-height:350px;

  height:330px;

  overflow:hidden;

  }

  .thumbnail 》 img{

  width:140px;height:140px;

  }

  《/style》

  《/head》

  《body》

  《div class=“container”》

  《div class=“row hotgoodslist”》

  《div class=“page-header”》

  《h1》热销商品《small》年度热销商品排行榜《/small》《/h1》

  《/div》

  《!--《div class=“col-sm-4 col-md-3”》

  《div class=“thumbnail”》

  《img src=“。。。” alt=“。。。”》

  《div class=“caption”》

  《h3》¥《span》400《/span》《/h3》

  《p》商品名称《/p》

  《p》

  《a href=“#” class=“btn btn-danger” role=“button”》加入购物车《/a》

  《a href=“#” class=“btn btn-primary” role=“button”》立即购买《/a》

  《/p》

  《/div》

  《/div》

  《/div》--》

  《/div》

  《div class=“row shirt”》

  《div class=“page-header”》

  《h1》衬衫《small》众多品牌齐聚,商务休闲首选《/small》《/h1》

  《/div》

  《/div》

  《/div》

  《script》

  $(function() {

  /* 加载热销商品列表页*/

  $.ajax({

  url:“http://datainfo.duapp.com/shopdata/getGoods.php?callback=?”,

  type:“get”,

  dataType:“jsonp”,

  success:function(resp) {

  console.log(resp);

  for(var i = 0; i 《 resp.length; i ++) {

  // DOM *** 作添加商品

  var $goodsBox = $(“《div》”).addClass(“col-md-3”).addClass(“col-sm-4”);

  var $thumbnail = $(“《div》”).addClass(“thumbnail”);

  var $img = $(“《img》”).attr(“src”, resp[i].goodsListImg);

  var $caption = $(“《div》”).addClass(“caption”);

  var $priceSpan = $(“《span》”).text(resp[i].price);

  var $price = $(“《h3》”).text(“¥”).append($priceSpan);

  var $name = $(“《p》”).text(resp[i].goodsName);

  var $id = $(“《p》”).text(resp[i].goodsID).css(“visible”, “hidden”);

  var $addCart = $(“《button》”).addClass(“btn”).addClass(“btn-danger”).text(“加入购物车”);

  var $buyNow = $(“《button》”).addClass(“btn”).addClass(“btn-primary”).text(“立即购买”);

  $caption.append($price);

  $caption.append($name);

  $caption.append($id);

  $thumbnail.append($img);

  $thumbnail.append($caption);

  $thumbnail.append($addCart);

  $thumbnail.append($buyNow);

  $goodsBox.append($thumbnail)

  $(“.hotgoodslist”).append($goodsBox);

  }

  }

  });

  /*

  加载衬衫商品列表页

  */

  $.ajax({

  url:“http://datainfo.duapp.com/shopdata/getGoods.php?callback=?”,

  type:“get”,

  data:{

  classID:1

  },

  dataType:“jsonp”,

  success:function(resp) {

  console.log(resp);

  for(var i = 0; i 《 resp.length; i ++) {

  // DOM *** 作添加商品

  var $goodsBox = $(“《div》”).addClass(“col-md-3”).addClass(“col-sm-4”);

  var $thumbnail = $(“《div》”).addClass(“thumbnail”);

  var $img = $(“《img》”).attr(“src”, resp[i].goodsListImg);

  var $caption = $(“《div》”).addClass(“caption”);

  var $priceSpan = $(“《span》”).text(resp[i].price);

  var $price = $(“《h3》”).append($priceSpan);

  var $name = $(“《p》”).text(resp[i].goodsName);

  var $id = $(“《p》”).text(resp[i].goodsID).css(“visible”, “hidden”);

  $caption.append($price);

  $caption.append($name);

  $caption.append($id);

  $thumbnail.append($img);

  $thumbnail.append($caption);

  $goodsBox.append($thumbnail)

  $(“.shirt”).append($goodsBox);

  }

  }

  });

  })

  《/script》

  《/body》

  《/html》

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/dianzi/2718025.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-08-17
下一篇 2022-08-17

发表评论

登录后才能评论

评论列表(0条)

保存