详解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 28 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jquery操作select大全
2014/04/25 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python之array赋值技巧分享
2019/11/28 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python如何支持并发方法详解
2020/07/25 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
护士节演讲稿开场白
2014/08/25 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
介绍信范文
2015/01/31 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
python - asyncio异步编程
2021/04/06 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS