标签：size struct 表单 script 很多 组件 种类型 不同 客户
最简单的元素信息改变。
{% block content %}
<h1>我的第一张网页</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>
{% endblock %}}
后端：
@app.route(‘/js‘)
def js_t():
return render_template(‘js.html‘)
前端：js.html
{% extends ‘base.html‘ %}
{% block content %}
<h1>我的第一张网页</h1>
<p id="demo">我的第一个段落</p>
<img
src="{{url_for(‘static‘,filename=‘img/a.jpg‘)}}"
alt="图片缺失" width="200" heigth="300">
<button
type="button"
onclick="displayDate()">显示日期</button>
<p id = ‘de‘>{{url_for(‘static‘,filename=‘js/js_sample.js‘)}}</p>
<script
src="{{url_for(‘static‘,filename=‘js/js_sample.js‘)}}"
type="text/javascript"
defer></script>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>
{% endblock %}}
包含一些元素的展示，引用外部js文件
<script src="{{url_for(‘static‘,filename=‘js/js_sample.js‘)}}" type="text/javascript" defer></script>
src属性代表文件指向；{{}}代表jinjia2的解释；
url_for代表flask的路径生成；
defer代表待页面加载完成后才执行脚本，否则可能出现找不到元素的问题。
ajax依赖于XMLHTTPRequest，它有一套规则去沟通浏览器与后端，但一般引用jquery就可以了。
ajax使用环境配置
这里使用的是jquery库:https://code.jquery.com/jquery-3.3.1.min.js
网页源码文件中引用:
<script src="{{url_for(‘static‘,filename=‘js/jquery-3.3.1.min.js‘)}}"></script>
前端代码：
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Ajax Test</title>
<script
src="{{url_for(‘static‘,filename=‘js/jquery-3.3.1.min.js‘)}}"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$.get("/mystring",function(data,
status){
alert("数据:
" + data + "\n状态:
" + status);
});
});
$(".btn2").click(function(){
$.get("/mydict",function(data,
status){
alert("name:
" + data.name + "
age:" + data.age);
});
});
$(".btn3").click(function(){
$.get("/mylist",function(data,
status){
alert("name:
" + data[0]+ " age:" + data[1]);
});
});
$(".btn4").click(function(){
$.ajax({url:"/mystring", data:{"mydata": "test"},success:function(data){
alert(data);
}});
});
$(".btn6_2").click(function(){
$.ajax({url:"/dataFromAjax", data:{"mydata": "test
data"},success:function(data){
alert(data);
}});
});
$(".btn5").click(function(){
$.ajax({url:"/mydict", success:function(data){
alert("name:
" + data.name + "
age:" + data.age);
}});
});
$(".btn6").click(function(){
$.ajax({url:"/mylist", success:function(data){
alert("name:
" + data[0] + " age:" + data[1]);
}});
});
$(".btn7").click(function(){
$("p").load("../static/test.txt");
});
$(".btn10").click(function(){
$("p").load("/mystring");
});
$(".btn8").click(function(){
$.getJSON("/mydict",function(data){
$.each(data, function(i,
field){
$("div").append(field + "
");
});
});
});
$(".btn9").click(function(){
$.post("/mydict", function(data,
status){
alert("name:
" + data.name + "
age:" + data.age);
});
});
});
</script>
</head>
<body>
<h1>Ajax Test</h1>
<button class="btn1">get
string</button>
<button class="btn2">get dict</button>
<button class="btn3">get list</button> <br/><br/>
<button class="btn4">ajax
string</button>
<button class="btn5">ajax dict</button>
<button class="btn6">ajax list</button>
<button class="btn6_2">ajax
sentDataToFlask</button><br/><br/>
<p>load:</p>
<button class="btn7">load from file</button>
<button class="btn10">load</button><br/><br/>
<div>getJson: </div><br/>
<button class="btn8">getJson</button><br/><br/>
<button class="btn9">post</button>
<script>
for (p in $(‘.btn1‘)){
console.log(p);
}
document.write(‘btn1的文字为：‘+$(‘.btn1‘).text())
</script>
</body>
</html>
后端：
# ajax test
@app.route(‘/ajax‘)
def ajax():
return render_template(‘ajax_test.html‘)
@app.route(‘/mystring‘)
def mystring():
return ‘my
string‘
@app.route(‘/dataFromAjax‘)
def dataFromAjax():
test = request.args.get(‘mydata‘)
print(test)
return ‘dataFromAjax‘
@app.route(‘/mydict‘, methods=[‘GET‘, ‘POST‘])
def mydict():
d = {‘name‘: ‘xmr‘, ‘age‘: 18}
return jsonify(d)
@app.route(‘/mylist‘)
def mylist():
l = [‘xmr‘, 18]
return jsonify(l)
# error handle
@app.errorhandler(404)
def page_not_found(error):
return ‘404‘
$( ‘a ‘) 相当于 document.getElementById( ‘a ‘)
这是用了某些组件后那些组件支持的符号，比如DWR
$其实是一个函数名，就是用来获取部件里面的值 $()= document.getElementById()
$在JS中本身只是一个符号而异，在JS里什么也不是。
但在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常之频繁，所以好多新手不知道，还以为$是JS的什么特殊语法。
后来，可能有些程序员JQUERY用得多了，发现$这个函数很好用，很方便，所以，在不用JQUERY的情况，一般自己也会自定义一个$函数。
即：
在jquery中它的代码是：
function( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced‘ // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context ); }
作用是选择一个元素，$(“.name”)为类选择器，$(“id”)为id选择
text():获取或者改变指定元素的文本
html():获取或改变指定元素的html元素以及文本
val():获取或者改变指定元素的value值（一般是表单元素）
以上3个都是jquery类库中的语法
有可能缓存没清除，还是使用之前的脚本，需要清除缓存。
button有两种类型
<input type="button" id="btn1" value="按钮"/>
<button id="btn1">按钮</button>
修改方法
document.getElementById("btn1").value="新按钮";
document.getElementById("btn1").innerHtml="新按钮";
getelementbyclassname返回的是一个元素列表，可用item(0)来进行选择。
typeof()查看类型
console.log(‘’) 控制台输出，在F12调试模式下便于调试
for 循环语法：
for (p in $(‘.btn1‘)){
console.log(p);
}
JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
它的使用非常简单，下载库并在前端引用即可。
选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
html中的事件是指页面对不同访问者的响应。
常见 DOM 事件：
|
鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许在文档完全加载完后执行函数。
在示例代码中也使用了这一方法。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
|
执行异步 AJAX 请求 |
$.get(url, data, callback)
参数 描述
url 必需，规定您需要请求的URL
data 可选，规定连同请求发送到服务器的数据，格式是json
callback 可选，回掉函数，当请求成功时运行的函数
$.post(url, data, callback)
参数 描述
url 必需，规定您需要请求的URL
data 可选，规定连同请求发送到服务器的数据，格式是json
callback 可选，回掉函数，当请求成功时运行的函数
以前写过一篇ajax的笔记，有一个大概的了解，今天写一下其具体实现原理。
ajax的核心是与服务器交换数据及更新网页。
更新网页都是在浏览器上进行的，只要有合适的脚本语言且解释器支持，还是比较好办的，目前而言这一部分的前置技术是css,html,dom,js。
ajax的关键是交换数据，即通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据。获得数据然后用js来操作DOM而更新页面。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：
a、向服务器提交数据的类型，即post还是get。
b、请求的url地址和传递的参数。
c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
Send方法用来发送请求。
知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
现在，对ajax的原理大概可以有一个陈述了：可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。
下面是一个后端对ajax进行响应的案例：
@app.route(‘/mystring‘)
def mystring():
return ‘my
string‘
与其它路由方法没什么不同。
当然，现在一般使用jquery，提供了更好的封装，使用起来也更方便。
优点：
1.使用异步方式与服务器通信，页面不需要重新加载，页面无刷新
2.按需取数据，减少服务器的负担
3.使得Web应用程序更为迅捷地响应用户交互
4.AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行
5.浏览器的内容和服务端代码进行分离。页面的内容全部由JAVAScript来控制，服务端负责逻辑的校验和从数据库中拿数据。
缺点：
1.安全问题：将服务端的方法暴露出来，黑客可利用这一点进行攻击
2.大量JS代码，容易出错
3.Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
4.可能破坏浏览器后退按钮的正常行为；
5.一些手持设备（如手机、PAD等）自带的浏览器现在还不能很好的支持Ajax
应用场景：
1.对数据进行过滤和操纵相关数据的场景
2.添加/删除树节点
3.添加/删除列表中的某一行记录
4.切换下拉列表item
5.注册用户名重名的校验
js是一种脚本语言，每个浏览器都内置了解释器。
flask或者说web服务器不关心网页中js脚本的内容，它被视为网页源码的一部分被发送给浏览器，然后由浏览器进行解释。
ajax是一种依赖于XMLHTTPRequest进行数据交换而无需更新整个网页的技术（废话）。
对于后端而言，ajax是透明的，它不关心，与普通路由没什么区别。
jquery是一个js库，包含一些常用的js函数，它与js的关系类似于urllib之于python。
jquery:http://www.runoob.com/jquery/jquery-tutorial.html
https://www.cnblogs.com/dulmcat/p/5812062.html
https://www.cnblogs.com/wanghp/p/6991554.html
标签：size struct 表单 script 很多 组件 种类型 不同 客户
原文地址：https://www.cnblogs.com/wodeboke-y/p/10581726.html
