详解jQuery中关于Ajax的几个常用的函数


Posted in jQuery onJuly 17, 2017

一:

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

二:传统的Ajax过于繁琐,jquer封装了一些ajax常用的简单函数。

   a:  $.ajax()方法:

   jsp页面代码 :

<head>
  <title>Ajax验证</title>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("[name='userName']").blur(function () {     
        $.ajax({
          type: "post",
          url: "/TestServlet",
          data:{action:"login"},     //data 传递的参数一般都是key:“ value” 类型的 value一定要加引号 我亲身体验 那种找不到错的感觉
          // dataType:'Text',      //servers 返回的格式 也可以是gjon
          success: function (data) {
            if (data == "success") {
              alert(data);
              $("#myspan").html(data);
            }
          },
          error: function () {      //这个用的比较少
          }
        })
      })
    })
  </script>
</head>
<body>
   姓名: <input name="userName" type="text"><span id="myspan"></span>
   密码: <input name="password" type="text">
</body>

     servlet后台代码:

public class TestServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String name = request.getParameter("action");
    System.out.println(name);
    if(name.equals("login")){
      response.getWriter().write("success");  //返回回掉函数的参数
    }else{
      response.getWriter().write("file");
    }
  }

   b:$.get() , $.post()和 $.getJson方法都是$.ajax()方法的精简版,用法大致一致,少了一个type

$.post("/TestServlet",
         {"uname":$('[name=uname]').val()},
         function (data) {
           alert(data);
         });

   c: $.load()

$("#msg").load(     //可以直接拿到文本框 的值
         "/TestServlet","action="+$('[name="userName"]').val()
         );
//后台可以直接 根据request.getParameter()拿到参数的值

   d:$(selector).serializeArray() 和$(selector).serialize()  

//这种方法 可以直接 获得form表单的name属性值,作为data的传参
 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
           $.each(data1,function (i,dom) {
             alert(dom.name+"\r\n"+dom.value);
           });
           var data2=$("#form1").serialize();
           alert(data2);

   e:作为data参数

var data2=$("#form1").serialize();
           $.getJSON("/TestServlet",data2, function (data) {
              alert(data);
           });

以上所述是小编给大家介绍的jQuery中关于Ajax的几个常用的函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery常用选择器详解
Jul 17 #jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
You might like
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python实现的快速排序算法详解
2017/08/01 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
校庆口号
2014/06/20 职场文书
合作协议书模板
2014/10/10 职场文书
小人国观后感
2015/06/11 职场文书
2019同学聚会主持词
2019/05/06 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis