详解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遍历节点方法汇总(推荐)
May 13 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 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 Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python查看模块安装位置的方法
2018/10/16 Python
Python 加密与解密小结
2018/12/06 Python
wxpython布局的实现方法
2019/11/01 Python
Python读取实时数据流示例
2019/12/02 Python
Python多线程获取返回值代码实例
2020/02/17 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
妇产医师自荐信
2014/01/29 职场文书
导游个人求职信范文
2014/03/23 职场文书
合作协议书
2014/04/23 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
大国崛起观后感
2015/06/02 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
深入理解go缓存库freecache的使用
2022/02/15 Golang
MySQL普通表如何转换成分区表
2022/05/30 MySQL