JQuery入门基础
目录
1.初识
下载
使用
JQuery（核心）对象
2.选择器
基础选择器
层次选择器
后代选择器
子代选择器
兄弟选择器
相邻选择器
3.JQuery DOM操作
创建元素
插入元素
删除元素
遍历元素
属性操作
获取属性
设置属性
删除属性
样式操作
获取样式
设置属性
添加class
删除class
内容操作
html()
text()
val()
4.JQuery事件
加载事件 $(function(){...}
鼠标事件
键盘事件
this
5.AJAX操作
$.get()方法
$.post()方法
$.ajax()
同源策略(Same-Origin Policy) 与 跨域的解决
1.初识
JQuery是一个快速、简洁的JavaScript框架，优化HTML文档操作、事件处理、动画设计和Ajax交互。
下载
下载地址：https://jquery.com/
开发版：jquery-x.x.x.js（学习源码，文件较大）
发布版：jquery-x.x.x.min.js（适合项目部署，文件较小）
使用
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
JQuery（核心）对象
$ 符号在JQuery中代表对JQuery对象的引用
$ == JQuery2.选择器
基础选择器
| 选择器 | 语法 | 说明 |
|---|---|---|
| id选择器 | $("#id名") | 选中某个id的元素（如果有多个同名id，则以第一个为准） |
| 类选择器 | $(".类名") | 选中某一类的元素 |
| 元素选择器 | $(“标签名”) | 选中某一标签的元素 |
| 组合选择器 | $(“选择器1, 选择器2, … , 选择器n”) | 同时对几个选择器进行相同的操作 |
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#idname").css("color","blue");$(".classname").css("color","green");$("div").css("color","red");})</script>
</head>
<body><p id="idname">id选择器</p><p class="classname">类选择器</p><div>标签选择器</div>
</body>
</html>
//作用是在文档加载完成后执行内部的代码
$(function () {
……
})
层次选择器
| 选择器 | 语法 | 说明 |
|---|---|---|
| 后代选择器 | $(“M N”) | 选择M元素内部后代N元素（所有N元素） |
| 子代选择器 | $(“M>N”) | 选择M元素内部子代N元素（所有第1代N元素） |
| 兄弟选择器 | $(“M~N”) | 选择M元素后面所有的同级N元素 |
| 相邻选择器 | $(“M+N”) | 选择M元素相邻的下一个元素（M、N是同级元素） |
后代选择器
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#first p").css("color","red");})</script>
</head>
<body><div id="first"><p>first的子元素</p><div id="second"><p>first子元素的子元素</p><p>first子元素的子元素</p></div><p>first的子元素</p></div>
</body>
</html>
子代选择器
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#first>p").css("color","red");})</script>
</head>
<body><div id="first"><p>first的子元素</p><div id="second"><p>first子元素的子元素</p><p>first子元素的子元素</p></div><p>first的子元素</p></div>
</body>
</html>
与后代选择器对比，可以知道：子代选择器只选取子代元素，不包括其他后代元素。
兄弟选择器
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#second~p").css("color","red");})</script>
</head>
<body><div id="first"><p>first的子元素</p><div id="second"><p>first子元素的子元素</p><p>first子元素的子元素</p></div><p>first的子元素</p><p>first的子元素</p></div>
</body>
</html>
兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素。
相邻选择器
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#second+p").css("color","red");})</script>
</head>
<body><div id="first"><p>first的子元素</p><div id="second"><p>first子元素的子元素</p><p>first子元素的子元素</p></div><p>first的子元素</p><p>first的子元素</p></div>
</body>
</html>
与兄弟选择器对比，可以知道：相邻选择器只选取后面相邻的第一个兄弟元素，不包括其他兄弟元素。
3.JQuery DOM操作
DOM（文档对象模型）（Document Object Model），由W3C定义的一个标准。
创建元素
使用字符串的形式来创建一个元素节点，然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {// 以字符串形式创建新元素var str = "<p>新创建元素</p>";// 在网页body部分添加新创建的元素$("body").append(str);})</script>
</head>
<body>
</body>
</html>
插入元素
| 方法 | 语法 | 说明 |
|---|---|---|
| prepend() | $(A).prepend(B) | 在元素A的内部开始处插入B元素（A、B为父子元素） |
| append() | $(A).append(B) | 在元素A的内部末尾处插入B元素（A、B为父子元素） |
| before() | $(A).before(B) | 在元素A的外部前面插入B元素（A、B为同级元素） |
| after() | $(A).after(B) | 在元素A的外部后面插入B元素（A、B为同级元素） |
代码如下，可自行体验不同方法之间的区别：
<head><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn1").click(function () {var li = "<li>用prepend()方法在无序列表<b>内部</b>添加的元素</li>";$("ul").prepend(li);})$("#btn2").click(function () {var li = "<li>用append()方法在无序列表<b>内部</b>添加的元素</li>";$("ul").append(li);})$("#btn3").click(function () {var li = "<p>用before()方法在无序列表<b>外部</b>添加的元素</p>";$("ul").before(li);})$("#btn4").click(function () {var li = "<p>用after()方法在无序列表<b>外部</b>添加的元素</p>";$("ul").after(li);})})</script>
</head>
<body><ul><li>无序列表中的元素A</li><li>无序列表中的元素B</li></ul><input id="btn1" type="button" value="prepend()方法" /><input id="btn2" type="button" value="append()方法" /><input id="btn3" type="button" value="before()方法" /><input id="btn4" type="button" value="after()方法" />
</body>
</html>
删除元素
| 方法 | 语法 | 说明 |
|---|---|---|
| remove() | $(A).remove() | 删除元素A内部及所有后代元素，不保留标签 |
| empty() | $(A).empty() | 清空元素A的内容及所有后代元素，保留标签 |
<head><title>删除元素</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn1").click(function () {$(".remove li:first-child").remove();})$("#btn2").click(function () {$(".empty li:first-child").empty();})})</script>
</head>
<body><ul class="remove"><li>测试remove()方法-<span>1</span></li><li>测试remove()方法-<span>2</span></li><li>测试remove()方法-<span>3</span></li></ul><input id="btn1" type="button" value="remove()方法" /><ul class="empty"><li>测试empty()方法-<span>1</span></li><li>测试empty()方法-<span>2</span></li><li>测试empty()方法-<span>3</span></li></ul><input id="btn2" type="button" value="empty()方法" />
</body>
</html>
remove()删除列表第一项；empty()清空列表第一项。
遍历元素
$(A).each(function(index, element){
……
})
each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。index是一个可选参数，它表示元素的索引号（即下标），索引从0开始的；element是可选参数，表示当前元素可以使用this代替
<head><title>遍历元素</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn").click(function () {$("li").each(function (index, element) {var txt = "第" + (index + 1) + "个元素";$(element).text(txt);});});})</script>
</head>
<body><ul><li></li><li></li><li></li></ul><input id="btn" type="button" value="添加内容" />
</body>
</html>
text() 在当前元素内添加文本
$("li").each(function (index, element) {
var txt = "第" + (index + 1) + "个li元素";
$(element).text(txt);
});
等价于：
$("li").each(function (index) {
var txt = "第" + (index + 1) + "个li元素";
$(this).text(txt);
});
属性操作
获取属性
| 方法 | 语法 | 说明 |
|---|---|---|
| attr(“属性名”) | $(A).attr(“属性名”) | 获取指定的属性值，如果没有该属性则返回undefined |
| prop(“属性名”) | $(A).prop(“属性名”) | 一般用于获取具有true和false两个属性的属性值 |
具有true和false这两种取值的属性，如checked、selected或disabled等建议使用prop()来操作；而其他的属性都建议使用attr()来操作。
设置属性
| 方法 | 语法 | 说明 |
|---|---|---|
| attr(“属性”, “取值”) | $(A).attr(“属性”, “取值”) | 设置一个属性 |
| attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $().attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置多个属性 |
删除属性
| 方法 | 语法 | 说明 |
|---|---|---|
| removeAttr(“属性名”) | $(A).removeAttr(“属性名”) | 删除元素A的某个属性 |
<head><title>属性操作</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#get_src").click(function () {alert($("#pic").attr("src"));});$("#set_src").click(function () {$("#pic").attr("src", "./images/cat02.png");});$("#delete_src").click(function () {$("#pic").removeAttr("src");});})</script>
</head>
<body><input id="get_src" type="button" value="获取图片src属性值"/><input id="set_src" type="button" value="修改图片src属性值"/><input id="delete_src" type="button" value="删除图片src属性值"/><br/><img id="pic" src="./images/cat01.png" alt="这是一只猫的图片" height=243 width=336 />
</body>
</html>
样式操作
获取样式
| 方法 | 语法 | 说明 |
|---|---|---|
| css(“属性名”) | $(A).css(“属性名”) | 获取元素A一个CSS属性的取值 |
设置属性
| 方法 | 语法 | 说明 |
|---|---|---|
| css(“属性”, “取值”) | $(A).css(“属性”, “取值”) | 设置元素A的一个属性 |
| css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | $(A).css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”}) | 设置元素A的多个属性 |
添加class
| 方法 | 语法 | 说明 |
|---|---|---|
| addClass(“类名”) | $(A).addClass(“类名”) | 为元素A添加一个样式类 |
删除class
| 方法 | 语法 | 说明 |
|---|---|---|
| removeClass(“类名”) | $(A).removeClass(“类名”) | 删除元素A中的一个样式类 |
<head><title>样式操作</title><style type="text/css">div {background-color: pink;}.select {font-weight: bold;}</style><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn1").click(function () {// 获取当前背景颜色样式var result = $("div").css("background-color");alert("background-color样式为：" + result);});$("#btn2").click(function () {// 设置背景颜色为橙色$("div").css("background-color", "orange");});$("#btn3").click(function () {// 添加字体加粗样式类$("div").addClass("select");});$("#btn4").click(function () {// 删除字体加粗样式类$("div").removeClass("select");});})</script>
</head>
<body><div>内容</div><input id="btn1" type="button" value="获取背景颜色样式" /><input id="btn2" type="button" value="设置背景颜色样式" /><input id="btn3" type="button" value="添加字体样式类" /><input id="btn4" type="button" value="删除字体样式类" />
</body>
</html>
内容操作
html()
| 方法 | 语法 | 说明 |
|---|---|---|
| html() | $(A).html() | 获取html内容 |
| html(“html内容”) | $(A).html(“html内容”) | 设置html内容 |
text()
| 方法 | 语法 | 说明 |
|---|---|---|
| text() | $(A).text() | 获取文本内容 |
| text(“文本内容”) | $(A).text(“文本内容”) | 设置文本内容 |
<head><title>html()和text()</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {// 获取内容var strHtml = $("p").html();var strText = $("p").text();$("#txt1").val(strHtml);$("#txt2").val(strText);// 设置内容$("#btn1").click(function () {$("ul li:nth-child(1)").html("<h3>你好</h3>")})$("#btn2").click(function () {$("ul li:nth-child(2)").text("<h3>你好</h3>")})})</script>
</head>
<body><p><strong style="color:red">段落</strong></p>html()是：<input id="txt1" type="text" /><br/>text()是：<input id="txt2" type="text" /><ul><li></li><li></li></ul><input id="btn1" type="button" value="html()方法设置列表第一项" /><input id="btn2" type="button" value="text()方法设置列表第二项" />
</body>
</html>
val()
表单元素的值都通过value属性来定义的，使用val()来获取和设置表单元素的值。
| 方法 | 语法 | 说明 |
|---|---|---|
| val() | $(A).val() | 获取表单元素值 |
| val(“值内容”) | $(A).val(“值内容”) | 设置表单元素值 |
<head><title>val()</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn_get").click(function(){var str1 = $("#txt1").val();alert(str1);});$("#btn_set").click(function(){var str2 = "JavaScript";$("#txt2").val(str2);});})</script>
</head>
<body><input id="txt1" type="text" value="JQuery"/><br/><input id="txt2" type="text" /><br/>获取第1个文本框的值：<input id="btn_get" type="button" value="获取"/><br/>设置第2个文本框的值：<input id="btn_set" type="button" value="设置">
</body>
</html>
4.JQuery事件
加载事件 $(function(){...}
在jQuery中，ready表示文档加载完成后再执行的一个事件，类似JavaScript中的onload事件
//写法1：
$(document).ready(function(){
……
})
//写法2：
jQuery(document).ready(function(){
……
})
//写法3：
$(function(){
……
})
//写法4：
jQuery(function(){
……
})
ready()方法的参数是一个匿名函数，写法3比较常见。
<head><title>加载事件</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>alert($(".content1").html());$(function () {alert($(".content2").html());})</script>
</head>
<body><div class="content1" style="background-color: pink;">内容1</div><div class="content2" style="background-color: orange;">内容2</div>
</body>
</html>
鼠标事件
常见的鼠标事件
| 事件 | 语法 | 说明 |
|---|---|---|
| click | $(A).click(function(){…}) | 鼠标单击事件 |
| mouseover | $(A).mouseover(function(){…}) | 鼠标移入事件 |
| mouseout | $(A).mouseout(function(){…}) | 鼠标移出事件 |
| mousedown | $(A).mousedown(function(){…}) | 鼠标按下事件 |
| mouseup | $(A).mouseup(function(){…}) | 鼠标松开事件 |
| mousemove | $(A).mousemove(function(){…}) | 鼠标移动事件 |
在事件方法中插入一个匿名函数function(){}，匿名函数内部是执行操作的代码。
<head><title>鼠标事件</title><style>#btn{display: inline-block;width: 200;height: 24px;line-height: 24px;font-family:"微软雅黑";font-size:16px;text-align: center;border-radius: 3px;background-color: rgba(0, 183, 255, 0.781);color: White;cursor: pointer;}#btn:hover {background-color: dodgerblue;}</style><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#btn").click(function(){alert("成功触发鼠标点击事件")})$("#content").mouseover(function(){$(this).css("color", "red");})$("#content").mouseout(function (){$(this).css("color", "black");})})</script>
</head>
<body><div id="btn">鼠标点击事件</div><div id="content">鼠标移入移出事件</div>
</body>
</html>
// 链式调用
$("#content").mouseover(function(){
$(this).css("color", "red");
}).mouseout(function () {
$(this).css("color", "black");
})
等价于
$("#content").mouseover(function(){
$(this).css("color", "red");
})
$("#content").mouseout(function () {
$(this).css("color", "black");
})
键盘事件
| 事件 | 语法 | 说明 |
|---|---|---|
| keydown | $(A).keydown(function(){…}) | 键盘按下事件 |
| keyup | $(A).keyup(function(){…}) | 键盘松开事件 |
<head><title>键盘事件</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#txt").keyup(function(){var str = $(this).val();// 计算字符串长度$("#num").text(str.length);})})</script>
</head>
<body><input id="txt" type="text" style="display: inline-block;"/><div>字符串长度为：<span id="num">0</span></div>
</body>
</html>
this
this大多数都是用于事件操作中，指向触发当前事件的元素。
<head><title>加载事件</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("div").click(function(){//$(this)等价于$("div")$(this).css("color", "red");})})</script>
</head>
<body><div>点击更改文本颜色</div>
</body>
</html>
在事件函数中，如果想要使用当前元素，尽量使用$(this)，防止出现各种bug。
5.AJAX操作
Ajax，全称“Asynchronous JavaScript and XML”，即“异步的JavaScript和XML”。是通过JavaScript的XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，实现客户端与服务器端的数据操作。
Ajax能够刷新指定的页面区域，从而减少客户端和服务端之间数据量的传输。
$.get()方法
语法：
$.get(url, data, fn, type)
| 参数 | 说明 |
|---|---|
| url | 必选参数，表示被加载的页面地址 |
| data | 可选参数，表示发送到服务器的数据 |
| fn | 可选参数，表示请求成功后的回调函数 |
| type | 可选参数，表示服务器返回的内容格式 |
参数type返回的内容格式包括：text、html、xml、json、script或default。
后端：
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
def index():return render_template("$.get().html")@app.route('/get_text', methods=['GET'])
def get_text():# 获取数据name = request.values["name"]email = request.values["email"]# 返回字符串result = "用户姓名为" + name + "，用户邮箱为" + emailreturn result@app.route('/get_json', methods=['GET'])
def get_json():name = request.values["name"]email = request.values["email"]# 返回json格式数据result = {"name": name, "email": email}return resultif __name__ == '__main__':app.run(port=5001, debug=True)
前端：
<head><title>$.get()方法</title><script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#send1").click(function () {$.get("/get_text",{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据function (data) {console.log(data)$("#data").html(data); // 把返回的数据添加到页面上},type="text");})$("#send2").click(function () {$.get("/get_json",{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据function (data) {console.log(data)// 解析服务器返回的json数据name=data['name']email=data['email']result="用户姓名为" + name + "，用户邮箱为" + email+"(JSON解析)"$("#data").html(result); // 把返回的数据添加到页面上},type="json");})})</script>
</head>
<body><form><p>姓名: <input id="name" type="text" /></p><p>邮箱: <input id="email" type="text" /></p><p><input id="send1" type="button" value="提交（返回格式为字符串）" /></p><p><input id="send2" type="button" value="提交（返回格式为JSON）" /></p></form><h3>服务器传输回来的数据：</h3><div id="data"></div>
</body>
</html>
$.post()方法
除了.get()方法，我们还可以使用.post()方法来通过Ajax去请求服务器的数据。
语法：
$.post(url, data, fn, type)
| 参数 | 说明 |
|---|---|
| url | 必选参数，表示被加载的页面地址 |
| data | 可选参数，表示发送到服务器的数据 |
| fn | 可选参数，表示请求成功后的回调函数 |
| type | 可选参数，表示服务器返回的内容格式 |
后端代码如下：
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
def index():return render_template("$.post().html")@app.route('/post_text', methods=['POST'])
def post_text():# 获取数据name = request.values["name"]email = request.values["email"]# 返回字符串result = "用户姓名为" + name + "，用户邮箱为" + emailreturn result@app.route('/post_json', methods=['POST'])
def post_json():name = request.values["name"]email = request.values["email"]# 返回json格式数据result = {"name": name, "email": email}return resultif __name__ == '__main__':app.run(port=5002, debug=True)
前端代码如下：
<head><title>$.post()方法</title><script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#send1").click(function () {$.post("/post_text",{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据function (data) {console.log(data)$("#data").html(data); // 把返回的数据添加到页面上},type="text");})$("#send2").click(function () {$.post("/post_json",{ name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据function (data) {console.log(data)// 解析服务器返回的json数据name=data['name']email=data['email']result="用户姓名为" + name + "，用户邮箱为" + email+"(JSON解析)"$("#data").html(result); // 把返回的数据添加到页面上},type="json");})})</script>
</head>
<body><form><p>姓名: <input id="name" type="text" /></p><p>邮箱: <input id="email" type="text" /></p><p><input id="send1" type="button" value="提交（返回格式为字符串）" /></p><p><input id="send2" type="button" value="提交（返回格式为JSON）" /></p></form><h3>服务器传输回来的数据：</h3><div id="data"></div>
</body>
</html>
$.ajax()
.get()、.post()本质上都是使用.ajax()实现的，都是.ajax()方法的简化版，$.ajax()是最底层的方法。
语法：
$.ajax(options)
options是一个对象，内部有很多参数可设置，所有参数可选：
后端：
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
def index():return render_template("$.ajax().html")@app.route('/ajax_text', methods=['GET', 'POST'])
def ajax_text():# 获取数据name = request.values["name"]email = request.values["email"]# 返回字符串result = "用户姓名为" + name + "，用户邮箱为" + emailreturn result@app.route('/ajax_json', methods=['GET', 'POST'])
def ajax_json():name = request.values["name"]email = request.values["email"]# 返回json格式数据result = {"name": name, "email": email}return resultif __name__ == '__main__':app.run(port=5003, debug=True)
前端：
<head><title>$.ajax()方法</title><script src="../static/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$("#send1").click(function () {$.ajax({url: "/ajax_text",type: "get", // 请求的类型data: { name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据dataType: "text", // 返回数据类型success: function (data) {console.log(data)$("#data").html(data); // 把返回的数据添加到页面上},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log(XMLHttpRequest.status);// 状态码console.log(XMLHttpRequest.readyState);// 状态console.log(textStatus);// 错误信息 }})})$("#send2").click(function () {$.ajax({url: "/ajax_json",type: "post", // 请求的类型data: { name: $("#name").val(), email: $("#email").val() }, // 发送到服务器的数据dataType: "json", // 返回数据类型success: function (data) {console.log(data)// 解析服务器返回的json数据name = data['name']email = data['email']result = "用户姓名为" + name + "，用户邮箱为" + email + "(JSON解析)"$("#data").html(result); // 把返回的数据添加到页面上},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log(XMLHttpRequest.status);// 状态码console.log(XMLHttpRequest.readyState);// 状态console.log(textStatus);// 错误信息 }})})})</script>
</head>
<body><form><p>姓名: <input id="name" type="text" /></p><p>邮箱: <input id="email" type="text" /></p><p><input id="send1" type="button" value="提交（返回格式为字符串）" /></p><p><input id="send2" type="button" value="提交（返回格式为JSON）" /></p></form><h3>服务器传输回来的数据：</h3><div id="data"></div>
</body>
</html>
同源策略(Same-Origin Policy) 与 跨域的解决
同源策略(Same-Origin Policy) 即协议、域名、端口号 必须完全相同，是浏览器的安全策略。Ajax遵守“同源策略”，Ajax请求无法从不同的域、子域或协议中获取数据。
如果想从不同的域、子域或协议中获取数据，就需要跨域。
CORS（Cross-Origin Resource Sharing），跨域资源共享。
下面简单介绍如何在Flask后端框架中设置CORS，需要下载flask_cors工具包。
from flask import Flask
from flask_cors import CORSapp = Flask(__name__)
CORS(app) #解决跨域@app.route("/")
def helloWorld():return "Hello, cross-origin-world!"