ajax=异步Javascript和XML(在不重新加载网页的情况下,ajax通过后台加载数据,在网页上显示)
ajax()方法通过请求HTTP请求加载远程数据。
jQuery ajax 的常用方法:$.get() ,$.post() ,$.json() ,$.getjson()
1.jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
GET-从服务器获得数据。(可能返回缓存数据)
POST-也可从服务器获得数据。不过不缓存,并且常用于连同请求一起发送数据。
get语法:$.get(url,callback);
用法如下: /* $.get({
url:"data/data.txt",
dataType:"",
data:"",
success:function(data){
console.log(data)
}
}
post语法:$.post(url,data,callback)
用法如下: $.post({
data:"",//存放修改的数据
url:"data/data.txt",
dataType:"",
success:function(data){
console.log(data)
},
error:function(){
}
})
2.jquery ajax以json格式返回
例子:
$.ajax({
method:"post",//或者get
data:"",
url:"data/data.txt",
dataType:"json",
success:function(data){
console.log(data);
}
})
3.jquery ajax 中的getjson()
例子:$.getJSON({
method:"post",
data:{wd:"2"},
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getback",
dataType:"jsonp",//跨域
jsonpCallback:"getback",//回调函数
success:function(data){
console.log(data);
}
})
接下来是模仿百度搜索框运用jquery ajax,帮你熟练掌握跨域的问题。
要模仿百度搜索框必须知道百度的搜索接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=
1.html部分
<div class="block">
<input id="test" type="text"/><span id="btn">百度一下</span>
</div>
2.css部分
<style>
*{
margin: 0;
padding: 0;
}
.block{
width:600px;
height: 40px;
border:1px solid silver;
margin: auto;
position: absolute;
left:0;
top:0;
bottom: 0;
right: 0;
}
.block>input{
width:485px;
height: 38px;
outline: none;
border-style: none;
font-size: 18px;
padding-left: 15px;
}
.block span{
display: inline-block;
width: 100px;
height: 40px;
background-color: #3da4ff;
color: white;
position: absolute;
top: 0;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.ullist{
position: absolute;
margin: 0;
top:40px;
left:0;
width: 500px;
height: auto;
background-color: rgb(240, 240, 240);
}
.ullist>li{
list-style: none;
padding-left:15px;
line-height: 26px;
font-size: 16px;
cursor: pointer;
}
.ullist>li a{
color: black;
text-decoration: none;
}
</style>
3.script部分
<script>
$(function () {
//根据搜索框中的中的情况,使用keyup来判断是否要发送请求,如果使用keydown会发现输入一个词后要再按一下键盘才
// 能发送请求获取数据,使用keyup在输入完词以后就会立即发送请求
$("#test").on("keyup",function(e){
$.ajax({
method: "post",
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr",
data: {wd: $(this).val()},//文本框中的值
jsonpCallback: "sr",//百度的回调函数
dataType: "jsonp",//跨域
success:function(data){
//创建ul ,动态创建li 用于放与文本框相关的名词列表
$(".ullist").remove();
var ul = $("<ul class='ullist'></ul>");
for(var i= 0;i<data.s.length;i++){
$("<li><a href='https://www.baidu.com/s?wd="+data.s[i]+"'>"+data.s[i]+"</a></li>").appendTo(ul)
}
$(".block").append(ul);
}
})
});
//点击百度一下这个按钮的时实现跳转页面
$("#btn").on("click",function(e){
location.href="https://www.baidu.com/s?wd="+$("test").val();
})
})
</script>