ajax = Asynchronous + JavaScript + And + XML（现在XML慢慢已经被JSON取代）
Asynchronous：异步请求（没有中断浏览器的用户体验）从服务器获取数据。
JSON ： 通过DOM操作对页面进行局部刷新
ajax作用：异步加载数据 + 局部刷新页面
效果一：利用api查看美女图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="beauty">换一组</button><br/>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#beauty").on("click",function(){
$("a").empty();
var url = "http://api.tianapi.com/meinv/?key=3cedb24a8f5af4277b3de0b9c841e1d6&num=20"
$.getJSON(url,function(jsonOBJ){
for (var i = 0; i < jsonOBJ.newslist.length ; i += 1){
$(document.body).append(
$("<a>").html(jsonOBJ.newslist[i].title+"<br/>").attr("href",jsonOBJ.newslist[i].picUrl).attr("width","400")
);
}
});
});
});
</script>
</body>
</html>
效果二：api-周公解梦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周公解梦在线版</title>
<style type="text/css">
#main{
position: absolute;
margin: 100px 200px;
float: left;
width: 800px;
height: 400px;
border: solid black;
}
</style>
</head>
<body>
<div id="main">
<span>解梦：</span>
<input placeholder="输入您想查询梦的关键字" id="text">
<button id="confirm">查询</button>
<hr />
<span>解析：</span>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#confirm").on("click",function(){
var content = $("#text").val().trim();
if (content.length>0){
//getJSON方法
// var str1 = encodeURIComponent(content,"utf-8");
// var url = "http://api.tianapi.com/txapi/dream/?key=3cedb24a8f5af4277b3de0b9c841e1d6&word=" + str1;
// $.getJSON(url,function(jsonOBJ){
// $("#main>p").empty();
// if (jsonOBJ.code == 250){
// alert("未检索到相关信息！")；
// }else{
// $("#main").append($("<p>").text(jsonOBJ.newslist[0].result))；
// }
// });
//ajax方法
$.ajax({
"url":"http://api.tianapi.com/txapi/dream/",
"type":"get",
"data":{
"key":"3cedb24a8f5af4277b3de0b9c841e1d6",
"word":content
},
"dataType": "json",
"success": function(jsonOBJ){
if (jsonOBJ.code == 250) {
alert("未检索到相关信息！");
}else{
$("#main").append($("<p>").text(jsonOBJ.newslist[0].result));
}
}
});
}
});
});
</script>
</body>
</html>
Bootstrap响应式布局
Bootstrap
网友评论