详解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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现全选按钮
Jan 01 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 foreach循环中使用引用的问题
2013/11/06 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
YII框架http缓存操作示例
2019/04/29 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
浅谈Python的文件类型
2016/05/30 Python
python中实现控制小数点位数的方法
2019/01/24 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
PyTorch的torch.cat用法
2020/06/28 Python
python解释器安装教程的方法步骤
2020/07/02 Python
树莓派升级python的具体步骤
2020/07/05 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
初一学生期末评语
2014/04/24 职场文书
建设投标担保书
2014/05/13 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
社区宣传标语口号
2015/12/26 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL