目录
1.初识
下载
使用
JQuery(核心)对象
2.选择器
基础选择器
层次选择器
后代选择器
子代选择器
兄弟选择器
相邻选择器
3.JQuery DOM操作
创建元素
插入元素
删除元素
遍历元素
属性操作
获取属性
设置属性
删除属性
样式操作
获取样式
设置属性
添加class
删除class
内容操作
html()
text()
val()
4.JQuery事件
加载事件 $(function(){...}
鼠标事件
键盘事件
this
5.AJAX操作
$.get()方法
$.post()方法
ajax()-toc" style="margin-left:40px;">$.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对象的引用
$ == JQuery
2.选择器
基础选择器
选择器 | 语法 | 说明 |
---|---|---|
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, request
app = 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 + ",用户邮箱为" + email
return 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 result
if __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, request
app = 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 + ",用户邮箱为" + email
return 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 result
if __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()">$.ajax()
.get()、.post()本质上都是使用.ajax()实现的,都是.ajax()方法的简化版,$.ajax()是最底层的方法。
语法:
$.ajax(options)
options是一个对象,内部有很多参数可设置,所有参数可选:
后端:
from flask import Flask, render_template, request
app = 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 + ",用户邮箱为" + email
return 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 result
if __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 CORS
app = Flask(__name__)
CORS(app) #解决跨域
@app.route("/")
def helloWorld():
return "Hello, cross-origin-world!"