Jquery使用AJax GET POST 方法
使用JQ框架来用axaj 可以省略很多步骤
因为很多东西已经被封装好到了jq里面了
那我们怎么来用它呢
首先 我们先去网站上搜索一个jq的cdn
将这个cdn引入到我们的项目文件中
然后我们可以通过这种方式来用我们的ajax
<h2>发送ajax请求</h2>
<button>GET</button>
<button>POST</button>
<button>通用型方法ajax</button>
</div>
<script>
$('button').eq(0).click(function(){
$.get('http://localhost:8000/jq',{a:100,b:200},function(data){
console.log(data);
},'json');
})
//jquery的方法种使用$.请求类型(地址,参数,回调函数,'响应体数据类型')的方式
//加了响应体数据类型的方式可以更加简便且不用转换自动转换成json对象形式
$("button").eq(1).click(function(){
$.post("http://localhost:8000/jq",{a:2,b:3},function(data){
console.log(data);
},'json')
})
</script>
上面代码中我们可以看到用jq可以省略很多代码 为我们的开发提供了更多的快捷
这段代码里面我分别用了两种请求方式 一种是get 一种是post
这个代码我们可以看出来是要比我们原来的代码少些了很多行 很多元素都被封装到了一起,也不用去增加数据转换代码
可以直接在代码段后端加上响应体类型 这样我们接收过来的json字符串会自动帮我们转换成对象
如果不加的它还是原来的字符型,所以这个不能忘记噢。
Jquery使用ajax的通用型方法Ajax
这种方法功能性要比前面写的两种方法全面一点,但是简便程度上来说 还是get post方法比较的好一点。
本篇笔记记录的这三种方法虽然说不是全面的描述jq的ajax的所有用法 但是对于基本的需求来说应该是
够用了,想要更加全面的jq AJAX用法大家可以去Jquery的官方文档里面查看 里面有更多详细的介绍;
$('button').eq(2).click(function(){
$.ajax({ //这里是一个对象
//url
url:'http://localhost:8000/jq',
//参数
data:{a:500,b:666},
//请求类型
type:'GET',
//响应体结果设置
dataType:'json',
//成功的回调
success:function(data){
console.log(data);
},
//超时的时间
timeout:2000,
//失败的回调
error:function(){//网络请求超时等错误都能被error函数处理
console.log('出错咯!')
},
headers:{//请求头信息
c:11,
d:22
}
});
});