详解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制作input提示内容(兼容IE8以上)
Jul 05 jQuery
详解jquery选择器的原理
Aug 01 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
1 Tube Radio
2021/03/02 无线电
php实现ping
2006/10/09 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
积极向上的团队口号
2014/06/06 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
个人汇报材料范文
2014/12/30 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript