first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/朱立伟/2019-04-12/index.html
+++ b/历届学生/朱立伟/2019-04-12/index.html
@@ -0,0 +1,95 @@
+<!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>
--- a/历届学生/朱立伟/2019-04-12/my.php
+++ b/历届学生/朱立伟/2019-04-12/my.php
@@ -0,0 +1,5 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+$content = file_get_contents("http://127.0.0.1/user.php");
+echo $content;
+?>
--- a/历届学生/朱立伟/2019-04-12/user.php
+++ b/历届学生/朱立伟/2019-04-12/user.php
@@ -0,0 +1,23 @@
+<?php
+
+// ajax 跨域的第一种方法，后端允许跨域(CROS)
+// header("Access-Control-Allow-Origin: *");
+
+// jsonp 1
+// 通过 $_GET 获取 get请求参数
+$back = $_GET["callback"];
+
+// 定义数组
+$list = array(
+  "title" => "李四",
+  "like" => array("骑车","编程","打游戏")
+);
+
+// jsonp 2
+// json_encode 把数组转换成json格式输出给前端
+// echo $back."(".json_encode($list).")";
+
+echo json_encode($list);
+
+
+?>
--- a/历届学生/朱立伟/2019-04-12/归档.zip
+++ b/历届学生/朱立伟/2019-04-12/归档.zip
--- a/历届学生/朱立伟/2019-04-12/笔记.txt
+++ b/历届学生/朱立伟/2019-04-12/笔记.txt
@@ -0,0 +1,14 @@
+ajax : 前后端数据无刷新交互的一种方式。
+
+1：后端渲染网站 
+
+2：前端渲染（前后端分离）
+
+3：数据查询语言
+
+
+flex + rem 实现移动端页面
+
+jquery + ajax 实现访问数据
+
+渲染页面