详解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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
使用jQuery实现购物车
Oct 29 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内存不够用的快速解决方法
2013/10/26 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python的id()函数解密过程
2012/12/25 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python多维数组切片方法
2018/04/13 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Django实现文件上传下载
2019/10/06 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
测量工程专业求职信
2014/02/24 职场文书
冰峪沟导游词
2015/02/09 职场文书
医德医风个人总结
2015/02/28 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL