详解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 04 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
JQuery样式与属性设置方法分析
Dec 07 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
PHP 采集程序 常用函数
2008/12/18 PHP
php 字符串函数收集
2010/03/29 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python常见排序算法基础教程
2017/04/13 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python ATM功能实现代码实例
2020/03/19 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
经典演讲稿范文
2013/12/30 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL