详解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 相关文章推荐
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery冲突问题解决方法
Jan 19 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配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python队列queue模块详解
2018/04/27 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python实现邮件发送功能
2019/08/10 Python
django创建超级用户过程解析
2019/09/18 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
职工运动会邀请函
2014/02/02 职场文书
卖房协议书
2014/04/11 职场文书
学前教育专业求职信
2014/09/02 职场文书
授权委托书样本
2014/09/25 职场文书
党员评议个人总结
2014/10/20 职场文书
城南旧事读书笔记
2015/06/29 职场文书