95 lines
2.7 KiB
HTML
95 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>ajax</title>
|
||
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<h2 id="username"></h2>
|
||
<p>用户的爱好：</p>
|
||
<ul id="userlike">
|
||
</ul>
|
||
|
||
|
||
|
||
<script>
|
||
// JSON.parse 把符合对象{}或者数组[]格式且当前数据类型是 string 的数据转换成 标准的 对象或者数组
|
||
|
||
// 原生的ajax请求
|
||
// var http = new XMLHttpRequest();
|
||
// http.open("GET","http://127.0.0.1/my.php",true)
|
||
// http.onreadystatechange = function () {
|
||
// if(http.readyState == 4 && http.status == 200) {
|
||
// console.log(JSON.parse(http.responseText))
|
||
// }else {}
|
||
// }
|
||
// http.send()
|
||
|
||
|
||
// GET POST PUT DELETE OPTHION
|
||
$.ajax({
|
||
url: 'http://127.0.0.1/my.php',
|
||
type: 'GET',
|
||
success: function (res){
|
||
var like = JSON.parse(res);
|
||
// 原生js写法 var name = document.getElementById("username")
|
||
// jq 语法，通过id获取元素
|
||
var name = $("#username")
|
||
// 把从后端获取到的用户名添加到页面
|
||
name.text(like.title)
|
||
|
||
// 获取用户兴趣的数组
|
||
var likeList = like.like
|
||
|
||
// 遍历数组，通过 append 将 三个li依次插入到父元素 id="userlike" 中
|
||
for(var i = 0;i<likeList.length;i++){
|
||
$("#userlike").append(`<li>${likeList[i]}</li>`)
|
||
}
|
||
|
||
},
|
||
error: function(err) {
|
||
console.log(err)
|
||
alert("抱歉，您的网络不好，请稍后再试")
|
||
}
|
||
})
|
||
|
||
|
||
// 发送ajax请求的时候回存在跨域 Access-Control-Allow-Origin：http://127.0.0.1:5500
|
||
// 什么是跨域？ 其实就是浏览器的安全规则 [ 同源策略 ]
|
||
// 我们自己的： http 127.0.0.1 5500
|
||
// 浏览器会去检查我们自己的协议，域名，端口和你想要访问的网站的 协议，域名，端口 是否完全相同，
|
||
// 只要有一个不相同，就会被浏览器阻止
|
||
|
||
// 解决跨域
|
||
// 1: 后端允许跨域
|
||
// 适用场景：公司自己的前端请求公司的后端
|
||
|
||
// 2: jsonp (不是ajax请求)
|
||
|
||
// function getBackEndData(res) {
|
||
// console.log(res)
|
||
// }
|
||
|
||
|
||
|
||
|
||
|
||
// 3: 服务端代理
|
||
// A(我们自己的前端) ---> C(别人的后端服务器接口)
|
||
// 被浏览器 同源策略 组织了
|
||
|
||
// A ---> B(我们自己的后端接口，虽然也存在跨域，但是后端可以设置允许跨域)
|
||
// B ---> C
|
||
// C --> B ---> A
|
||
|
||
|
||
|
||
|
||
</script>
|
||
<!-- <script src="http://127.0.0.1/user.php?callback=getBackEndData"></script> -->
|
||
</body>
|
||
</html> |