Jquery的Ajax技术使用方法


Posted in jQuery onJanuary 21, 2019

Jquery的Ajax技术(重点)

jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种:

Jquery的Ajax技术使用方法

1)$.get(url, [data], [callback], [type])

2)$.post(url, [data], [callback], [type])

区别:get有字节码乱码问题,post无字节码乱码问题(获取请求页面数据到后台,后台response.setContextType(“text/html;charset=UTF-8”)响应乱码问题还与原来一样)

其中:

  •     url:代表请求的服务器端地址
  •     data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
  •     callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
  •     type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)常用的返回类型:text、json、html等

如果type为json,并且服务器端返回的就是json格式字符串jq内部会帮我们自动转化,在回调函数中获取的实参就是转化完成的js对象直接使用即可。

参数的顺序可更换的,但是如果把data放在后面会出现无法传递数据的问题,所以不要擅自更换严格按照jq文档中的顺序进行使用。

function get(){
   $.get(
     "/web22-ajax/ajaxServlet2",//url
     {"name":"muzidigbig","age":22},//请求参数,json的数据格式
     function(data){//请求成功后返回过来的参数
       alert(data.name+data.age);
     },
     "json"
   );
  };
//java只能是java代码,前端页面的代码只能转换成json对象
response.getWriter().write("{\"name\":\"muzi\",\"age\":22}");

3)$.ajax( { option1:value1,option2:value2... } ); (重要)

常用的option有如下:

    async:是否异步,默认是true代表异步

    url:请求服务器端地址

    type:请求方式,POST/GET(不写默认get)

    data:发送到服务器的参数,建议使用json格式

    success:成功响应执行的函数,对应的类型是function类型,请求成功后获得的值会自动封装在这个函数的第一个参数中

    error:失败响应执行的函数,对应的类型是function类型

    dataType:服务器端返回的数据类型,常用text和json

beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理如果返回false可以取消本次ajax请求。

<body>
<button>发送请求</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
  $('button').click(function () {
    $.ajax({
      async:true,
      url:"向后台地址发送请求",
      type:'post',//请求的方式
      data:{'name':'muzidigbig','age':'20'},//请求的数据
      success:function (backdata) {//请求成功后返回的数据会封装在回调函数的第一个参数中
        //通过backdata来获取所需要的数据
        alert(backdata.name+backdata.age);
      },
      error:function () {//响应不成功时返回的函数
        console.log('请求失败!')
      },
      dataType:'json'//设置返回的数据类型
    })
  });
</script>

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python各种语言间时间的转化实现代码
2016/03/23 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python如何重新加载模块
2020/07/29 Python
网络工程专业毕业生推荐信
2013/10/28 职场文书
生日邀请函范文
2014/01/13 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
个人投资计划书
2014/05/01 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
单身申明具结书
2015/02/26 职场文书
法制主题班会教案
2015/08/13 职场文书
投资入股协议书
2016/03/22 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript