<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2>jQuery的ajax</h2>
<input class='get' type="button" value='get请求'>
<input class='post' type="button" value='post请求'>
<input class='ajax' type="button" value='ajax请求'>
<input class='ajax_extend' type="button" value='$.ajax使用补充'>
</body>
</html>
<!-- 导入jQuery -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
//自己的js
// get请求
$('.get').click(function () {
// $.get('../00.backData/01.backSendData.php','name=rose&husband=robot',function(data){
// alert(data);
// })
// 支持传入js对象
$.get('../00.backData/01.backSendData.php',{name:'黑猫警长',skill:'抓老鼠'}, function (data) {
alert(data);
})
})
// post请求
$('.post').click(function () {
// 支持传入js对象
$.post('../00.backData/01.backSendData.php',{name:'飞天小女警',skill:'自由飞翔'}, function (data) {
alert(data);
})
})
// 可以自己选择 get 还是post
$('.ajax').click(function(){
$.ajax({
url:'../00.backData/backXML.php',
// type:'post',
// date:'memeda',
success:function(data){
console.log(data);
}
})
})
// $.ajax使用补充
$('.ajax_extend').click(function(){
/*
type 如果不设置 默认的请求方法是? get
如果用get请求 那么 可以不写 type属性
success
在请求成功才会触发
如果出现 服务器告诉浏览器返回的类型 跟 jQuery内部实际转换的类型不匹配 会无法触发
error
当请求出现问题 会触发这个回调函数
complete
请求完成会触发
*/
$.ajax({
// url:'../00.backData/01.backSendData.php',
// data:{s
// name:'喜洋洋',
// skill:'卖萌'
// },
// url:'../00.backData/backXML.php',
url:'../00.backData/backJSON.php',
success:function(data){
console.log(data);
},
// 形参可以改名字 这里直接使用默认的即可
// 参数1 异步对象
// 参数2 错误信息
// 参数3 错在哪里
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log('失败了哦');
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
},
complete:function(){
console.log('请求完成了');
},
dataType:'jsonp' //如果后台人员忘记设置xml/jsonp数据的设置，通过该设置可以设置数据的编码格式
})
})
</script>
