您现在的位置是:孟垂博自媒体博客 ✈ JQuery
使用load(),getJSON(),get(),post(),ajax(),ajaxSetup()方法异步请求数据
08-11最后更新时间:2024-10-20【已收录】人已围观收藏
简介转载于慕课网代码
备注为自己认为应该 注意 的地方
1.load()
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用load()方法异步请求数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color:Blue;
color:#fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
ul
{
float: left;
width: 280px;
padding: 5px 0px;
margin: 0px;
font-size: 14px;
list-style-type: none;
}
img
{
margin: 8px;
}
ul li
{
float: left;
width: 280px;
height: 23px;
line-height: 23px;
padding: 3px 8px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
</style>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱吃的水果</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul> <!--这里显示获取的数据-->
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul").html("") <!--可以设置一个加载的动态图-->
.load("https://www.imooc.com/data/fruit.html",function(){
$this.attr("disabled", "true"); <!--加载完以后的函数,让input点击失效-->
});
})
});
</script>
</body>
</html>
2.getJSON()
<head>
<title>使用getJSON()方法异步加载JSON格式数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的一项运动</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function(){
$('#btnShow').bind("click",function(){
var $this = $(this);
$.getJSON('https://www.imooc.com/data/sport.json',function(data){
$this.attr("disabled", "true");
$.each(data,function(index,value){ //each()遍历
$("ul").append("<li>" +index+ value["name"] + "</li>");
});
});
} )
});
</script>
</body>
</html>
3.get()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用get()方法以GET方式从服务器获取数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
//在回调函数中通过data参数传回请求的数据,并以data.name格式访问数据中各项的内容,data是回调函数默认的参数,data取名字随意,这里是形参
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get('https://www.imooc.com/data/info_f.php',function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
})
});
</script>
</body>
</html>
4.post()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用post()方法以POST方式从服务器发送和获取数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字是否大于0</span>
<span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
</div>
<ul>
<li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$zhi=$("#txtNumber").val();
$.post('https://www.imooc.com/data/check_f.php',{num:$zhi},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
</body>
</html>
5.ajax()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajax()方法加载服务器数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="检测" />
</span>
</div>
<ul>
<li>请求输入一个数字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:'https://www.imooc.com/data/check.php',
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>
</html>
6.ajaxSetup()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajaxSetup()方法设置全局ajax请求默认选项</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">奇偶性和是否大于0</span>
<span class="fr">
<input id="btnShow_1" type="button" value="验证1" />
<input id="btnShow_2" type="button" value="验证2" />
</span>
</div>
<ul>
<li>请求输入一个数字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type:"post",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check_f.php"
});
})
});
</script>
</body>
</html>
来个json例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="text" placeholder="请输入您的名字" id="txt">
<button id="saveBtn">保存数据</button>
<button id="loadBtn">加载数据</button>
<button id="deleteBtn">清空数据</button>
<ul></ul>
</body>
<script>
$(function () {
var $save = $('#saveBtn'),
$load = $('#loadBtn'),
$delete = $('#deleteBtn'),
json = [];
$save.click(function() {
var text = $('#txt').val();
if (text) {
json.push({"name": text});
$('#txt').val("");
} else {
alert('写点东西再保存不行吗老铁?!');
}
});
$load.click(function () {
if (json.length) {
$('ul').html('');
$.each(json, function(index, obj) {
$('ul').append(`<li>学生的名字是:${obj.name}</li>`);
});
} else {
alert("没数据啦!");
}
});
$delete.click(function () {
json = [];
alert('你惨了,数据都没了。');
$("ul").html("");
});
});
</script>
</html>
《使用load(),getJSON(),get(),post(),ajax(),ajaxSetup()方法异步请求数据.doc》
如果这篇文章对你有所帮助,劳烦点个赞
推荐度:
很赞哦! ()
相关文章
- 帝国cms7.5文章设置权限后没登录提示内容的模板在哪改1970-01-01
- 巨量引擎莱卡定向某个行业经典设置1970-01-01
- 我们只卖红冬枣一斤青冬枣也不卖1970-01-01
- 淘宝店铺店标图片直接设置导航链接方法1970-01-01
- 用个人微信打造自己的私域流量1970-01-01
- 怎么突破现在信息流瓶颈,再次抢占高流量1970-01-01
- 每个人都很努力 并不是只有你一个人满腹委屈1970-01-01
- 财富哲学其实就是财富的思想在作怪1970-01-01
- 帝国cms批量更改标题插件(seo专用)1970-01-01
- 彻底搞懂js中最后加一个return false;的原因1970-01-01
文章评论
点击排行
本栏推荐
标签云(最新)
站点信息
- 建站时间:2019年06月15日
- 网站程序:帝国CMS7.5
- 博客模板:可免费共享
- 文章统计:235篇文章
- 时间卷轴:时间轴
- 标签管理:标签云
- 网站地图:XML网站地图
- 微信二维码:扫描一下,你我就是有缘