ajax请求数据
上面是Ajax请求数据的四组方法，效果都是统一的。
·
简介
- AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发
技术。（不是一种编程语言） - ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
- Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。
ajax请求 四步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
点击按钮，显示对应的内容
<hr>
<input type="button" name="btn1" id="btn1" value="发送">
<div id="div1"></div>
<script>
document.querySelector("#btn1").onclick = function() {
//第一步：创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest()
//第二步：告诉浏览器请求的方式是什么，以及请求发送到哪儿
xmlhttp.open("get", "data/student.xml", true)
//第三步：设置响应服务器数据处理
xmlhttp.onreadystatechange = function() {
//数据处理
var students = xmlhttp.responseXML.getElementsByTagName("student")
var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
for (var i = 0; i < students.length; i++) {
var stuid = students[i].getElementsByTagName("stuID")[0].innerHTML
var stuname = students[i].getElementsByTagName("stuName")[0].innerHTML
var stuage = students[i].getElementsByTagName("stuAge")[0].innerHTML
table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
document.querySelector("#div1").innerHTML = table
}
//第四步：发送请求
xmlhttp.send()
// xmlhttp.onload
}
</script>
</body>
</html>json方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
点击按钮，显示对应的内容
<hr>
<input type="button" name="btn1" id="btn1" value="发送">
<div id="div1"></div>
<script>
document.querySelector("#btn1").onclick = function() {
//第一步：创建一个XMLHttpRequet对象
var xmlhttp = new XMLHttpRequest()
//第二步：告诉浏览器请求的方式是什么，以及请求发送到哪儿
xmlhttp.open("get", "data/student.json", true)
//第三步：设置响应服务器数据处理
xmlhttp.onreadystatechange = function() {
//数据处理
var students = JSON.parse(xmlhttp.responseText)
var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
for (var i = 0; i < students.length; i++) {
var stuid = students[i].stuID
var stuname = students[i].stuName
var stuage = students[i].stuAge
table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
document.querySelector("#div1").innerHTML = table
}
//第四步：发送请求
xmlhttp.send()
// xmlhttp.onload
}
</script>
</body>
</html>jQuery方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="点击">
<div id="div1">
</div>
<script>
$(function() {
var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
$("#btn1").click(function() {
$.ajax({
type: "get", //请求方式
url: "data/student.json", //请求的url
async: true, //异步
dataType: "text", //响应的数据类型
success: function(data) { //请求数据时对数据的处理
var students = JSON.parse(data)
for (var i = 0; i < students.length; i++) {
var stuid = students[i].stuID
var stuname = students[i].stuName
var stuage = students[i].stuAge
table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
$("#div1").html(table)
}
})
})
})
</script>
</body>
</html>$.get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="点击">
<div id="div1">
</div>
<script>
$(function() {
var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
$("#btn1").click(function() {
$.get("data/student.json", function(data) {
// console.log(typeof data);
for (var i = 0; i < data.length; i++) {
var stuid = data[i].stuID
var stuname = data[i].stuName
var stuage = data[i].stuAge
table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
}
table += "</table>"
$("#div1").html(table)
})
})
})
</script>
</body>
</html>上面是Ajax请求数据的四组方法，效果都是统一的
效果图如下：
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)