网站开发时,ajax是一个非常方便的工具,它具有和表单相同的功能完成前端和后台之间的交互!它起到局部刷新的功能!那什么时候用ajax呢?下面给大家介绍几个实例,首先应该分为两类:

 一、在用表单和ajax都可以完成某个功能时,只是使用ajax更加的快速、方便。

1,在网站文章下面的评论上面使用ajax!它在用户提交评论时利用ajax将内容传到后台,在将后台的数据利用js传输出来并显示到页面。这个过程只是刷新了页面的评论模块,文章等其他内容没有刷新,这样比表单的速度不是快了许多么?

2,局部翻页可以使用ajax,比如当文章评论多了的时候我们需要分页那么我们可以用ajax,跟上面道理一样他只刷新了页面的评论并没有刷新文章从而提高了速度!

    二、有些功能表单无法实现,只能使用ajax!

1,大家看下面这个搜索功能

如果我利用表单去提交搜索商品的信息,之后再将数据传输出来!那样会造成一个问题,就是用户在刷新的时候它不能返回到原来的页面还是保持你搜索商品的页面,这个只有用ajax来完成!

2,当用户注册时校验用户名是否存在!这个就是获取用户鼠标离开注册框的事件后将用户的账号提交到后台验证,然后根据校验情况再返回到前台信息,这个表单是不能做到的!当然你可以在用户提交全部注册信息的时候再校验,这样可以用表单不过用户体验不好!

3,我们可以用ajax来代替iframe框架!这个很简单就不多说啦!

 最后,在使用ajax的时候要注意几点:

    第一,如何将php数据转化为js数组大家可以看看我的别一篇文章,将php数组转js数组,js如何接收PHP数组,json的用法

第二,当用ajax在页面上添加或者修改内容时,普通jQuery获取对象的方法是无效的,这时候可以使用live()或者on()方法,jQuery获取动态添加的元素,live和on的区别

  本文来源于王业楼的个人博客 本文地址:http://www.ly89.cn/detailB/50.html

  欢迎分享本文,转载请注明本文出处和地址

jQuery具体实例介绍什么时候用ajax,ajax应该在什么地方使用的更多相关文章

  1. jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  2. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  3. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  4. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  5. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  6. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  7. jquery.form.js实现将form提交转为ajax方式提交的方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  8. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

    在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...

  9. jQuery插件实例五:手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

  1. jQuery-How to Create a Basic Plugin

    官方插件:http://learn.jquery.com/plugins/basic-plugin-creation/ $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能. ...

  2. 使用:/usr/bin/phpize 报错

    使用:/usr/bin/phpize 出现下面错误提示 Can't find PHP headers in /usr/include/php The php-devel package is requ ...

  3. Vue.js(2.x)之插值

    看了一些友邻写的文章,不少是基于1.0版本的,有些东西在2.x版本应该已经废除了(如属性插值.单次插值在2.x版本上运行根本不执行).对于不理解的东东,找起资料来就更麻烦了.不得不老老实实线下测试并整 ...

  4. koa源码分析

    最近项目要使用koa,所以提前学习一下,顺便看了koa框架的源码. 注:源码是koa2.x koa的源码很简洁,关键代码只有4个文件,当然还包括一些依赖npm包 const Koa = require ...

  5. bank conflct 一句话总结

    由于最新的多播模式区别于原来的广播模式,原来同一个warp不同线程访问同一个bank的相同地址不再是bank conflict, 现在总结为:只要同一个 warp 的不同线程会访问到同一个 bank ...

  6. javaweb 工程 tomcat启动报错的问你

    2015-03-03 14:39:32,657 INFO (org.springframework.web.context.ContextLoader:296) - Root WebApplicati ...

  7. 大数四则运算java(转)

    // 大数的四则运算 #include <iostream> #include <string> #include <algorithm> using namesp ...

  8. 青松云安全-WAF-1.0.655 (ubuntu 14.04 server)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: web application firewall basic software security ubuntu waf 服务优惠价: 按服务商许可协 ...

  9. 红象云腾CRH 一键部署大数据平台

    平台: arm 类型: ARM 模板 软件包: azkaban hadoop 2.6 hbase hive kafka spark zeppelin azkaban basic software bi ...

  10. vs移动团队项目集合

    vs移动团队项目集合: https://msdn.microsoft.com/zh-cn/library/vs/alm/dd936138(v=vs.120)/css