<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
