收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
