jQuery中异步请求
1、load方法
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：
$(selector).load(URL,data,callback);
参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
例子：加载phpinfo.php页面并将放回的结果放到<div>中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用load()方法异步请求数据</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<input id="button" type="button" value="加载"/>
<div id="test"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#test").load("/phpinfo.php",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
alert(responseTxt);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</body>
</html>
2.getScript()方法
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
####这个方法就是调用js文件并执行，可以跨域操作#####
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<input id="button" type="button" value="加载"/>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.getScript('http://www.123.com:81/2.js',function(){alert("success")})
});
});
</script>
</body>
</html>
2.js
alert('2.js加载成功'); 调用成功
执行了回调函数。
3.通过get方法
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：
$.get(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
#########不能跨域访问###############
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.get("http://www.123.com/",function(data,status){alert("数据:" + data + "\n状态：" + status)});
</script>
</body>
</html>
a.html文件
4.通过post方法
#######不能给跨域############
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="html"></div>
<script type="text/javascript">
$.post("http://www.123.com/test.php",
{
name:"afanti",
sex:"man"
},
function(data,status){
alert("数据:" + data + "\n状态：" + status);
document.getElementById("html").innerHTML = data
});
</script>
</body>
</html>
test.php
5.getJSON
$.getJSON("/test.php?name=afanti&sex=man").then(
function(result){
alert(result.name+result.sex);
});
then后面处理回调。getScript也可以使用。
6.ajax发出请求。a.html
$.ajax({
type:"get",
url:"test.php",
data:{"name":"afanti","sex":"man"},
catche: false,
async: false,
timeout: 1000,
dataType:"json", //预期服务器返回的数据类型。支持参数：xml,html,script,json,text,jsonp
contentType: 'application/x-www-form-urlencoded',
headers:{
"header1":"aaaa" //设置请求头1
},
beforeSend:function(xhr){
xhr.setRequestHeader("header2","bbbb") //设置请求头2
}
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
//xhrFields:{
//withCredentials:true //默认情况下，跨域请求不携带cookie。不跨域就可以携带cookie。通过设置这个参数可以实现跨域携带cookie但是后台代码，Access-Contro-Allow-Credentials:true加上这个头部信息
//}
success:function(data,status)
{
document.getElementById("html").innerHTML=data.name+";"+data.sex;
// document.getElementById("html").innerHTML=data;
alert(status);
},
error:function(err,status)
{
alert(status);
}
});
test.php
ajax实现jsonp
http://www.123.com/a.html
$.ajax({
type:"get",
url:"http://www.123.com:81/test.php",
catche: false,
async: false,
timeout: 1000,
dataType:"jsonp", //预期服务器返回的数据类型。
contentType: 'application/x-www-form-urlencoded',
jsonp: 'callback', //http://www.123.com:81/test.php?callback=callback1111&_=1529803521061发出这样的请求
jsonpCallback: 'callback1111', //回调函数的名字
success:function(data,status)
{
for(var key in data)
{
console.log(key,data[key]);
} //1、这里
alert(status);
},
error:function(err,status)
{
// alert(status);
}
});
function callback1111(data)
{
alert(data); //2、都能获取到数据
}
www.123.com:81/test.php
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('name'=>'afanti','sex'=>'man');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
可以进行跨域访问。
参考文章：
https://www.xmanblog.net/2018/04/09/web-cross-domain-ecurity/
jQuery中异步请求的更多相关文章
- 在内核中异步请求设备固件firmware的测试代码
在内核中异步请求设备固件firmware的测试代码 static void ghost_load_firmware_callback(const struct firmware *fw, void * ...
- SpringBoot中异步请求和异步调用（看这一篇就够了）
原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10661591.html,否则将追究法律责任!!! 一.SpringBoot中异步请求的使用 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- JavaScrpit中异步请求Ajax实现
在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需 ...
- jQuery中ajax请求的六种方法（三、一）：$.ajax()方法
1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- ASP.NET WebForm中异步请求防止XSRF攻击的方法
在ASP.NET MVC中微软已经提供了如何防止跨域攻击的方法.对于传统Webfrom中使用Handler来接受ajax的Post请求数据,如何来防止XSRF攻击呢.这里给大家提供一个简单地方法,和M ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- jQuery Ajax(异步请求)
jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...
- vue中异步请求渲染问题（swiper不轮播）（在开发过程中遇到过什么问题、踩过的坑）
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
随机推荐
- c#配置文件app.config 与 Settings.settings
本篇博客将介绍C#中Settings的使用.参考:https://docs.microsoft.com/zh-cn/visualstudio/ide/managing-application-sett ...
- C# 创建、部署、调用WebService
webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 概念性的东西就不说太多,下面开始创建一个简单的webservice的例子.这里我用的是Visual Studio 201 ...
- 解决Genymotion下载device时较慢的问题
Genymotion添加device时,加载速度很慢: 简单方法处理如下: 1.首先找到如下目录文件名 打开后找到如下行,复制该地址直接使用迅雷等下载工具下载好该ova文件: 2.放置下载好的文件至对 ...
- 【原】Java跨域以及实现原理
前言:最近研究了一下跨域,主要是jsonp的实现,经过测试后总结如下: 一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨 ...
- 撩课-Java每天5道面试题第9天
撩课Java+系统架构 视频 点击开始学习 76.XML技术的作用? XML技术用于数据存储. 信息配置. 数据交换三方面. 可以将数据存储在XML中, 通过节点. 元素内容. 属性标示数据内容及关系 ...
- oracle 多列数据相同，部分列数据不同合并不相同列数据
出现这样一种情况: 前面列数据一致,最后remark数据不同,将remark合并成 解决办法: 最后一列:结果详情: 使用到的语句为: select a,b,c,wm_concat(d) d,wm_c ...
- 【SSH网上商城项目实战04】EasyUI菜单的实现
转自:https://blog.csdn.net/eson_15/article/details/51297705 上一节我们使用EasyUI搭建了后台页面的框架,这一节我们主要使用EasyUI技术简 ...
- Java 双亲委派模型
1. Java 类加载器的分类 2. 双亲委派模型 Parents Delegration Model
- Go按照条件编译
Go 支持按照条件编译,具体来说它是通过 go/build包 里定义的tags和命名约定来让Go的包可以管理不同平台的代码 . 我们这里以下面这个开源项目为例,来看Go的按条件编译, 这个开源项目是把 ...
- 最大行走路线问题（DP）
在一个NxN的棋盘上,每个格子里有若干个棋子,假设起点为左上角的格子,且每次只能向下或向右走一格,问怎样走才能得到最多的棋子. 这是很简单的递推题了. 因为只能向下或者向右,所以其实我们可以把棋盘看成 ...