博客
关于我
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求
阅读量:336 次
发布时间:2019-03-04

本文共 1987 字,大约阅读时间需要 6 分钟。

jQuery中使用ajax:

在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中;市面上有多个版本的jQuery库,这里到官网:https://jquery.com/download/随意找个比较老的版本即可,后面学完node可以使用npm更方便地下载到具体的版本,这里就不做过多强调了;下载完后要找到文件:jquery-1.12.4.zip\jquery-1.12.4\dist - 这个位置的文件就是要引入项目的文件,解压大小为 2.3 MB左右,其用法如下:

//1.脚本之前引入jQuery文件:        //2.$ajax()是jQuery的ajax API,最基础的可以传两个参数,参数一为URL地址;参数二为对象;习惯传入一个对象作为参数,URL地址可以在这个对象中设置:        $.ajax('time.php', {               type: 'post', //提交方式,当为post时请求是通过请求体传递,当为get时,请求是通过URL传递            success: function(result) {    //请求成功后的回调函数,里面的参数是响应体                console.log(result);            };        });            $.ajax({               url: 'time.php',            type: 'get',            data: {   //data给服务端传递参数,后面跟一个对象。                id: 1,                name: 'kuhai',                age: 18            },           	dataType: 'json', //当服务端没有设置Content-Type: application/json时,可以通过dataType:'json'设置响应体数据的类型。            success: function(result) {                   console.log(result);/result会根据服务端设置的header('Content-Type: application/json')做出对应的响应,而原生的是不会根据服务端做出对应的响应,jQuery特有的。            }        });

jQuery中ajax的基本使用方法:

jQuery中ajax快捷操作:

jQuery中ajax全局事件:

jQuery中全局事件指:ajaxStart和ajaxStop事件,只要有ajax发生或结束就会执行此事件,常用于做加载进度条效果:(nprogress是一个做进度条的插件,有兴趣的话可以到官方文档学习)

jQuery中不刷新页面实现局部加载:

jQuery中load(url,data,function(response,status,xhr))方法是使用ajax对数据加载,URL是数据接口地址,data是请求时向服务器发送的数据,function是请求完成时执行的函数(response请求的结果,status请求状态,XMLHttpRequest对象);此方法只传入页面的URL时,如果URL字符串中有空格且后面为一个页面元素的选择器,则只请求选择器这个元素,这样就可以实现页面局部刷新效果,如:

页面1

下面是index.html中a标签地址指向页面的代码:

页面2

页面3

jQuery中JSONP:

ajax跨域请求:

实际中ajax中已经支持跨域请求,只需要在服务端设置:header(‘Access-Control-Allow-Origin: *’)此配置,即可实现ajax跨域请求,如:

服务端代码:

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。

笔者:苦海

转载地址:http://zlne.baihongyu.com/

你可能感兴趣的文章
Linux的软链接跟Windows快捷方式一样?
查看>>
更改github的默认语言类型
查看>>
使用第三方sdk,微信wechat扫码登录
查看>>
mysql中的行转列
查看>>
ValueError: check_hostname requires server_hostname
查看>>
基于LabVIEW的入门指南
查看>>
PCB布局系列汇总
查看>>
电容入门知识
查看>>
2019CCPC女生专场赛_K - Tetris_打表/模拟_暴力之王
查看>>
“/”应用程序中的服务器错误。
查看>>
MUI之ajax获取后台接口数据
查看>>
使用sqlserver 查询不连续的数据
查看>>
用div+css+html+js 实现图片放大
查看>>
(原创)在Linux上安装运行Python3(CentOS7为例)
查看>>
变量覆盖漏洞
查看>>
weblogic之cve-2015-4852
查看>>
Java注释
查看>>
水调歌头·1024
查看>>
对不起
查看>>
C++ 函数重载
查看>>