二阶段day10-jQuery
2018-11-12 本文已影响0人
ATM_shark
<!--Ajax:全称--Asynchronous JavaScript and XML
HTML:Hyper-Text Markup Language 超文本标记语言
XML:eXtensible Markup Language 可扩展标记语言
XML最重要的用途就是在异构系统之间交换数据，但其结构较为复杂，导致数据包比较大
现在这项功能基本本JSON和YAML格式替换了
通过JavaScript代码向服务器发起异步请求并获取数据
异步请求：在不中断用户体验的前提下向服务器发出请求
获取数据后可以通过DOM操作对页面进行局部刷新加载服务器返回数据-->
encodeURIComponent(str,'utf-8') 编码
decodeURIComponent(str) 解码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步请求-美女图片</title>
</head>
<body>
<button>换一组</button>
<div></div>
<script src="js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
<!--方法1-->
<!--<script type="text/javascript">
$(function(){
$('button').on('click',function(){
var url='http://api.tianapi.com/meinv/?key=e5f434b676d7c4563a98e50c577ece29&num=10'
$.getJSON(url,function(jsonObj){
$('div').empty()
$.each(jsonObj.newslist, function(index,x) {
var img = $('<img>').attr('width',500).attr('src',x.picUrl)
$('div').append(img)
});
})
})
})
</script>-->
<!--方法2-->
<script type="text/javascript">
$(function(){
$('button').on('click',function(){
$.ajax({
'type':"get",
'url':"http://api.tianapi.com/meinv/",
'data':{'key':'e5f434b676d7c4563a98e50c577ece29','num':'10'},
'dataType':'json',
'success':function(jsonObj){
$('div').empty()
$.each(jsonObj.newslist, function(index,xjjObj) {
var img=$('<img>').attr('width',250).attr('src',xjjObj.picUrl)
$('div').append(img)
});
}
});
})
})
</script>
</body>
</html>
jQuery用法详解
http://www.runoob.com/jquery/jquery-tutorial.html
