目录
认识Ajax
了解Ajax
什么叫做Ajax：(Asynchronous JavaScript and XML) 异步的JavaScript和xml(数据传输)
XML：数据传输格式 (大型的门户网站：新浪、网易、凤凰网等)
优点：1、种类丰富
2、数据传输量非常大
缺点：1、解析麻烦
2、不太适合轻量级数据
<?xml version="1.0" encoding="utf-8" ?> <!-- 版本和编码格式 -->
<root> <!-- 根节点<></> 中间的部分叫做节点值 -->
<systemConfig>
<CityName>北京</CityName>
<CityCode>201</CityCode>
<ParentCityCode>0</ParentCityCode>
<areaCode>010</areaCode>
<AgreementUrl></AgreementUrl> <!-- <AgreementUrl/> -->
<IntentionLevel>
<Item key="1" value="A"/> //属性节点
<Item key="2" value="B"> </Item>
<Item key="3" value="C"> </Item>
</IntentionLevel>
<ComeChannel>
<Item key="1" value="报纸"></Item>
<Item key="2" value="杂志"></Item>
</ComeChannel>
<BuyCarBudget>
<Item key="1" value="40-50万"></Item>
<Item key="2" value="50-60万"></Item>
</BuyCarBudget>
<IntentionColor>
<Item key="1" value="红"></Item>
<Item key="2" value="黄"></Item>
</IntentionColor>
</systemConfig>
</root>json数据传输格式：(比较简单的数据传输格式，是字符串) 95%移动端应用
优点：1、轻量级数据
2、解析比较轻松 JSON.parse() JOSN.stringify()
缺点：1、数据种类比较少
2、传输数据量比较小
同步和异步
【注】任何一个程序都是由很多个小程序组成的，同步和异步是用来描述一个程序的运行状态
同步：阻塞；如果两个程序在运行，当前程序是否能运行必须等前一个程序运行完才能运行
异步：非阻塞，当前程序的运行跟前面的程序运行没有任何关系
【注】Ajax是前后端数据交互的搬运工，都可以异步执行。
Ajax对象兼容和try_throw_catch
创建一个文本，使该内容显示在网页上
//1.txt
I am a string!<!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>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// 1、创建ajax对象
var xhr = new XMLHttpRequest();
// 2、调用open
/*
第一个参数：请求方式 get post等
第二个参数：url(相对路径和绝对路径都可)
第三个参数：是否异步
true 异步
false 同步
*/
xhr.open("get", "1.txt", true);
// 3、调用send
xhr.send();
// 4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}
</script>
</head>
<body>
<button id="btn1">下载数据</button>
</body>
</html>Ajax对象_兼容
XMLHttpRequest IE8以下不兼容
IE8以下声明Ajax方法：ActiveXObjject("Microsoft.XMLHTTP");
// 1、创建ajax对象兼容
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}try_catch
try{
尝试执行的代码；
}catch(error){
error 错误对象，try括号中代码执行的异常信息；
补救代码；
}
执行过程：
1、先去执行try中的代码
2、如果try中的代码执行正常，catch中的代码就不执行了
3、如果try中国的代码执行异常，直接执行catch中的代码进行补救
try{
alert("异常信息之前");
alert("异常信息之后");
}catch(error){
alert("补救代码，Error:" + error);
}输出结果：异常信息之前；异常信息之后
try{
alert("异常信息之前");
alert(num); //错误代码
alert("异常信息之后");
}catch(error){
alert("补救代码，Error:" + error);
}输出结果：异常信息之前；补救代码，Error:ReferenceError: num is not defined
【注】更多的是用在代码调试和后期维护
<!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>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// 1、创建ajax对象
var xhr = null;
try{ /* 相对于if...else语句，try...catch执行效率更高 */
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、调用open
xhr.open("get", "1.txt", true);
// 3、调用send
xhr.send();
// 4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}
</script>
</head>
<body>
<button id="btn1">下载数据</button>
</body>
</html>try_throw_catch
throw:手动抛出异常
try{
尝试执行的代码；
throw new Error("异常信息文本");
}catch(error){
error 错误对象，try括号中代码执行的异常信息；
补救代码；
}
try{
alert("异常信息之前");
throw new Error("这是演习，不用紧张");
alert("异常信息之后");
}catch(error){
alert("补救代码，Error:" + error);
}输出结果：异常信息之前；补救代码，Error:Error: 这是演习，不用紧张
try{
alert("异常信息之前");
// throw new Error("这是演习，不用紧张");
alert("异常信息之后");
throw new Error("到这里是正常代码");
alert(3);
}catch(error){
alert("补救代码，Error:" + error);
}可以用来测试哪一段的代码是否正常
onreadyStatechange事件
readyStatechange 事件类型
- xhr.readyState 发生变化的时候调用
- 0：调用open方法之前
- 1：调用send方法之后，发送请求
- 2：send方法完成，已经接收到所有的响应内容
- 3：正在解析下载到的数据
- 4：解析完成
status HTTP状态码
-
200 —— 交易成功
-
404 —— 没有发现文件、查询或URI
-
400 —— 错误请求，如语法错误
<!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>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// 1、创建ajax对象
var xhr = null;
try{ /* 相对于if...else语句，try...catch执行效率更高 */
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、调用open
xhr.open("get", "1.txt", true);
// 3、调用send
xhr.send();
// 4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 判断本次下载的状态码是多少
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<button id="btn1">下载数据</button>
</body>
</html>GET和POST请求
form表单__GET请求
open方法中第一个参数是请求方式，常用的有get和post
get：
//1.get.php
<?php
header('content-type:text/html;charset="utf-8"');
/*
$_GET(全局的关联数组) 存放通过get提交的所有的数据
*/
$username = $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];
/* 获取?后面对应键的值 */
echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";
?><!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>
</script>
</head>
<body>
<!--
action 点击submit以后跳转到url
method 表单的提交数据的方式
get(默认)
http://localhost/code/1.get.php?username=xxx&age=18&password=123456
提交方式：直接将数据拼接在url后面进行提交，通过?进行拼接，这种方式称为查询字符串
好处：简单，可以通过修改地址栏的url修改数据
缺点：
1、不安全
2、最大2kb
3、没法实现上传
post
-->
<form action="1.get.php" method="GET">
<input type="text" name="username" placeholder="用户名"/>
<input type="text" name="age" placeholder="年龄"/>
<input type="text" name="password" placeholder="密码"/>
<input type="submit">
</form>
</body>
</html>
form表单__POST请求
需要在form内添加：enctype="application/x-www-form-urlencoded"
//1.post.php
<?php
header('content-type:text/html;charset="utf-8"');
/*
$_POST 全局数组
存储过来的post发送过来的数组
*/
$username = $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];
/* 获取?后面对应键的值 */
echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";
?><!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>
</script>
</head>
<body>
<!--
action 点击submit以后跳转到url
method 表单的提交数据的方式
post
http://localhost/code/1.post.php
提交方式：post提交通过浏览器内部进行提交
好处：
1、所有的数据不会裸露在外面，是安全的
2、理论上没有上限(要考虑服务器大小和网速和带宽情况等)
3、上传
缺点：比get稍微复杂
-->
<form action="1.post.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" placeholder="用户名"/>
<input type="text" name="age" placeholder="年龄"/>
<input type="text" name="password" placeholder="密码"/>
<input type="submit">
</form>
</body>
</html>
Ajax__GET请求
// 2、调用open(url必须通过?进行拼接)
xhr.open("get", "1.get.php?username=yyy&age=19&password=123abc", true);
<!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>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// 1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、调用open
xhr.open("get", "1.get.php?username=yyy&age=19&password=123abc", true);
// 3、调用send
xhr.send();
// 4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<button id="btn1">GET请求</button>
</body>
</html>Ajax__POST请求
// 必须在send方法之前，去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
/*
post提交的数据，需要通过send方法进行提交
?name1=value&name2=value2 search
name1=value&name2=value2 querystring
*/
// 3、调用send
xhr.send("username=yyy&age=19&password=123abc");
<!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>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// 1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、调用open
xhr.open("post", "1.post.php", true);
// 必须在send方法之前，去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
/*
post提交的数据，需要通过send方法进行提交
?name1=value&name2=value2 search
name1=value&name2=value2 querystring
*/
// 3、调用send
xhr.send("username=yyy&age=19&password=123abc");
// 4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<button id="btn1">POST提交</button>
</body>
</html>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>
<script>
/*
method
url
data
*/
function $ajax({method = "get", url, data}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
}
window.onload = function(){
var oGetBtn = document.getElementById("getBtn");
var oPostBtn = document.getElementById("postBtn");
//1、get请求
oGetBtn.onclick = function(){
$ajax({
url: "1.get.php",
data: "username=xxx&age=19&password=123abc"
})
}
// 2、post请求
oPostBtn.onclick = function(){
$ajax({
method: "post",
url: "1.post.php",
data: "username=xxx&age=19&password=123abc"
})
}
}
</script>
</head>
<body>
<button id="getBtn">GET请求</button>
<button id="postBtn">POST请求</button>
</body>
</html>querystring函数封装
?name1=value1 search 查询字符串
name1=value1&name2=value2 querystring 也叫查询字符串
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
var str = querystring({
name1: "value1",
name2: "balue2",
name3: "value3"
})
alert(str);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>
<script>
/*
method
url
data
*/
function $ajax({method = "get", url, data}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 判断如果数据存在
if(data){
data = querystring(data);
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
}
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var oGetBtn = document.getElementById("getBtn");
var oPostBtn = document.getElementById("postBtn");
//1、get请求
oGetBtn.onclick = function(){
$ajax({
url: "1.get.php",
data: {
username: "xxx",
age: 18,
password: "123abc"
}
})
}
// 2、post请求
oPostBtn.onclick = function(){
$ajax({
method: "post",
url: "1.post.php",
data: {
username: "xxx",
age: 18,
password: "123abc"
}
})
}
}
</script>
</head>
<body>
<button id="getBtn">GET请求</button>
<button id="postBtn">POST请求</button>
</body>
</html>
回调函数
<!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>
/*
method
url
data
success:数据下载成功以后执行的函数
error：数据下载失败以后执行的函数
*/
function $ajax({method = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 判断如果数据存在
if(data){
data = querystring(data);
}
if(method == "get" && data){
url += "?" + data;
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
/*
如何处理数据操作不确定
回调函数
*/
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var oGetBtn = document.getElementById("getBtn");
var oPostBtn = document.getElementById("postBtn");
//1、get请求
oGetBtn.onclick = function(){
$ajax({
url: "1.get.php",
data: {
username: "xxx",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET请求下载到的数据："+ result);
},
error: function(msg){
alert(msg);
}
})
}
// 2、post请求
oPostBtn.onclick = function(){
$ajax({
method: "post",
url: "1.post.php",
data: {
username: "xxx",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST请求下载到的数据："+ result);
},
error: function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="getBtn">GET请求</button>
<button id="postBtn">POST请求</button>
</body>
</html>JSON对象和实战案例
JSON对象
经典案例：去家具城买家具
宜家 运输 我家
装好的 拆掉 装好的
前端 运输 后端
数据结构 字符串(运输成本很低) 数据结构
涉及到两个操作：
1、将数据结构转字符串
2、将字符串转数据结构
有两种流行格式转换：JSON 和 XML
JSON数据传输格式（字符串的一种格式）类似于拆装家具的说明书
JSON对象
JSON.stringify(); 数据结构 => 字符串
JSON.parse(); json格式字符串 => 数据结构
// 1、<1>数组转字符串
var arr = [100, true, "hello"];
var str = JSON.stringify(arr);
alert(arr); //100,true,hello
alert(str); //[100,true,"hello"]
// 1、<2>字符串转数组
var str1 = '[100,true,"hello"]';
var arr1 = JSON.parse(str);
alert(arr1[1]); //true // 2、<1>对象转字符串
var obj = {
username: "钢铁侠",
age: 18,
sex: "男"
};
var str = JSON.stringify(obj);
alert(obj); //[object Object]
alert(str); //{"username":"钢铁侠","age":18,"sex":"男"}
// 2、<2>字符串转对象
var str1 = '{"username":"钢铁侠","age":18,"sex":"男"}';
var obj1 = JSON.parse(str);
alert(obj1.username); //钢铁侠
案例
json_encode( ) 将数据结构转成字符串
json_decode( ) 将字符串转成对应的数据结构
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('leo', 'momo', 'zhangsen');
echo json_encode($arr1); //["leo","momo","zhangsen"]
?>下载数组类型的
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('leo', 'momo', 'zhangsen');
echo json_encode($arr1); //["leo","momo","zhangsen"]
?><!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="ajax.js"></script>
<script>
/*
前后端交互的流程：
1、通过ajax下载数据
2、分析数据，转成对应的数据结构
3、处理数据
*/
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
$ajax({
method: "get",
url: "getList.php",
success: function(result){
// alert(result);
var arr = JSON.parse(result);
for(var i = 0; i < arr.length; i++){
alert(i + "," + arr[i]);
}
},
error: function(msg){
//报错
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="btn1">下载数据</button>
</body>
</html>下载对象
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
/* 关联数组 */
$arr2 = array("username" => "leo", "age" => 32);
echo json_encode($arr2);
?><!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="ajax.js"></script>
<script>
/*
前后端交互的流程：
1、通过ajax下载数据
2、分析数据，转成对应的数据结构
3、处理数据
*/
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
$ajax({
method: "get",
url: "getList.php",
success: function(result){
// alert(result); //{"username":"leo","age":32}
var obj = JSON.parse(result);
alert(obj.username); //leo
},
error: function(msg){
//报错
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="btn1">下载数据</button>
</body>
</html>案例——获取新闻列表
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title' => '超级大冷门 阿根廷1-2不敌沙特阿拉伯', 'date' => '2022-11-22'),
array('title' => '又开庭了 刘鑫提交了新证据', 'date' => '2022-11-21'),
array('title' => '陈冬成我国首位在轨时长超200天航天员', 'date' => '2022-11-20'),
array('title' => '游戏工委：未成年人沉迷游戏问题已基本解决', 'date' => '2022-11-19'),
array('title' => '超级大冷门 阿根廷1-2不敌沙特阿拉伯', 'date' => '2022-11-22'),
array('title' => '游戏工委：未成年人沉迷游戏问题已基本解决', 'date' => '2022-11-19'),
array('title' => '超级大冷门 阿根廷1-2不敌沙特阿拉伯', 'date' => '2022-11-22'),
array('title' => '游戏工委：未成年人沉迷游戏问题已基本解决', 'date' => '2022-11-19'),
array('title' => '特斯拉降价，奔驰电动车降价，下一个降价的会是谁？', 'date' => '2022-11-18'),
array('title' => '又开庭了 刘鑫提交了新证据', 'date' => '2018-11-21'),
array('title' => '超级大冷门 阿根廷1-2不敌沙特阿拉伯', 'date' => '2022-11-22'),
array('title' => '特斯拉降价，奔驰电动车降价，下一个降价的会是谁？', 'date' => '2022-11-18'),
array('title' => '又开庭了 刘鑫提交了新证据', 'date' => '2022-11-21'),
array('title' => '游戏工委：未成年人沉迷游戏问题已基本解决', 'date' => '2022-11-19'),
array('title' => '超级大冷门 阿根廷1-2不敌沙特阿拉伯', 'date' => '2022-11-22'),
);
echo json_encode($news);
?>
格式不清晰解决：在线JSON校验格式化工具（Be JSON）
第一步：ajax下载数据
第二步：分析数据；上述网站解析数据进行分析
第三步：处理数据
oUl.innerHTML = ""; //每次加载页面之前都需要把数据清空一次，否则每点一次按钮就会增加一次新闻列表
<!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="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
$ajax({
method: "get",
url: "getnews.php",
success: function(result){
oUl.innerHTML = ""; //每次加载页面之前都需要把数据清空一次
// alert(result);
var arr = JSON.parse(result);
// 通过循环创建节点添加到页面上
for(var i = 0; i <arr.length; i++){
// 创建li结点和a结点
var newLi = document.createElement("li");
var oA = document.createElement("a");
oA.href = "#" + i;
oA.innerHTML = arr[i].title;
var oSpan = document.createElement("span");
oSpan.innerHTML = `[${arr[i].date}]`;
newLi.appendChild(oA);
newLi.appendChild(oSpan);
oUl.appendChild(newLi);
}
},
error: function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="btn1">获取新闻列表</button>
<ul id="ul1">
<!-- <li>
<a href="#">标题</a>
<span>【日期】</span>
</li> -->
</ul>
</body>
</html>通过拼接字符串实现
<!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="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
$ajax({
method: "get",
url: "getnews.php",
success: function(result){
// alert(result);
var arr = JSON.parse(result);
var str = ``;
// 拼接字符串
for(var i = 0; i <arr.length; i++){
str += `<li>
<a href="#${i}">${arr[i].title}</a>
<span>${arr[i].date}</span>
</li>`;
}
oUl.innerHTML = str;
},
error: function(msg){
alert(msg);
}
})
}
}
</script>
</head>
<body>
<button id="btn1">获取新闻列表</button>
<ul id="ul1">
<!-- <li>
<a href="#">标题</a>
<span>【日期】</span>
</li> -->
</ul>
</body>
</html>
扫一扫
3762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
