<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<button id="btn1">ajax获取text</button>
<div id="div1"></div>
<button id="btn2">ajax获取html</button>
<div id="div2"></div>
<button id="btn3">ajax获取json</button>
<div id="div3"></div>
<button id="btn4">ajax获取xml</button>
<div id="div4"></div>
<script>
$(function(){
$('#btn1').on('click',function(){
$.ajax({
type:'GET',
url:'test.txt',
data:'',
datatype:'text',
success:function(data,status){
$('#div1').html(data)
}
});
});
$('#btn2').on('click', function () {
$.ajax({
type: 'GET',
url: 'test.html',
data: null,
dataType: 'html',
success: function (data, status) {
$('#div2').html(data)
}
})
})
$('#btn3').on('click', function () {
$.ajax({
type: 'GET',
url: 'test.json',
data: null,
dataType: 'json',
success: function (data, status) {
var info = '姓名:'+data.name+'<br>性别:'+data.sex+'<br>负责课程:'+data.lesson
$('#div3').html(info)
}
})
})
$('#btn4').on('click', function () {
$.ajax({
type: 'GET',
url: 'test.xml',
data: null,
dataType: 'xml',
success: function (data, status) {
$(data).find('root').each(function () {
var name = $(this).find('name value').text()
var sex = $(this).find('sex value').text()
var lesson = $(this).find('lesson value').text()
var info = '姓名:'+name+'<br>性别:'+sex+'<br>负责课程:'+lesson
$('#div4').html(info)
})
}
})
})
});
</script>
</body>
</html>博客列表 >1221jquery ajax练习
1221jquery ajax练习
- yestrue的博客原创转载
- 2017年12月24日 02:15:50663浏览
上一条：js实现自动聊天功能之敏感词过滤下一条：1221相册的添加移动变形删除
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
