首页 前端知识 前端基础(HTML、CSS、JS、jQuery)

前端基础(HTML、CSS、JS、jQuery)

2024-03-15 11:03:10 前端知识 前端哥 364 608 我要收藏

文章目录

  • 一、HTML基础
    • 1.1 常用标签(表格、表单、按钮等)
    • 1.2 其他一些标签(书签、显示效果、缩写等)
  • 二、CSS基础
    • 2.1 CSS引入方式
    • 2.2 CSS选择器
    • 2.3 CSS常用属性
  • 三、JavaScript
    • 3.1 JS使用方式
    • 3.2 变量和数据类型
    • 3.3 函数、作用域、条件语句
  • 四、jQuery
    • 4.1 jQuery用法
    • 4.2 jQuery事件
    • 4.3 JS对象
  • 五、JSON对象
  • 六、ajax
  • 七、Web框架

一、HTML基础

HTML指的是超文本标记语言。标记就是标签如<标签名></标签名>,标签大多数都是成对出现的。HTML基本结构如下

<!-- 文档说明 -->
<!DOCTYPE html>
<!-- 页面使用的语言 -->
<html lang="en">
<!-- 头部标签,负责对网页进行设置标题、编码格式以及引入CSS和JS文件 -->
<head>
    <!-- 设置字符集 -->
    <meta charset="UTF-8">
    <!-- 如果当前浏览器是IE的话,使用IE的最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端显示当前页面时,不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置标题 -->
    <title>标题栏</title>
</head>
<!-- 网页内容 -->
<body>
    网页内容
</body>
</html>

1.1 常用标签(表格、表单、按钮等)

函数作用举例结果
<!-- -->注释<!-- 注释内容 -->
h1~h6标题<h4>标题1</h4>
divdiv标签通常作为块使用(页面布局)
p段落所有连续的空格或空行都会被算作一个空格
pre段落输入多少空格或行就是多少
a链接<a href="https://www.runoob.com">链接</a>链接
image
或img
图片<image src="https://blog.csdn.net/weixin_46287157/article/details/a.jpeg" alt="图片未显示时提示">图片</image>
<image src="https://blog.csdn.net/weixin_46287157/article/details/a.jpeg">图片</image>
图片未显示时提示图片
图片
br换行<br>
hr分割线,定义水平线<hr />
b粗体<b>粗体</b>粗体
strong粗体<strong>重要文本</strong>重要文本
sub下标<sub>下标</sub>下标
sup上标<sup>上标</sup>上标
q双引号<q>双引号</q>双引号
del删除(中间横线)<del>删除(中间横线)</del>删除(中间横线)
ins插入(下划线)<ins>插入(下划线)</ins>插入(下划线)
i斜体<i>斜体</i>斜体
em斜体<em>重要文本</em>重要文本
big字体放大<big>放大</big>放大
small字体缩小<small>缩小</small>缩小
bdo字体反向输出<bdo dir="rtl">从右到左显示</bdo>从右到左显示

列表标签

函数作用举例结果
ul无序列列表标签<ul><li>无序列</li><li>无序列</li><li>无序列</li></ul>
  • 无序列
  • 无序列
  • 无序列
ol有序列列表标签<ol><li>有序列</li><li>由序列</li><li>有序列</li></ol>
  1. 有序列
  2. 由序列
  3. 有序列

表格标签

函数作用
table一个表格
tr表格中的一行
td表格中的列
th表格中的表头
border: 1px solid rgb(0, 0, 0)显示边框
border-collapse: collapse;表格边框合并
    <table style="border: 1px solid rgb(0, 0, 0);border-collapse: collapse;">
        <tr>
            <th style="border: 1px solid rgb(0, 0, 0);">函数</th>
            <th style="border: 1px solid rgb(0, 0, 0);">含义</th>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);">table</td>
            <td style="border: 1px solid rgb(0, 0, 0);">表格</td>
        </tr>
        <tr>
            <td style="border: 1px solid rgb(0, 0, 0);">tr</td>
            <td style="border: 1px solid rgb(0, 0, 0);"></td>
        </tr>
    </table>

显示效果如下
在这里插入图片描述在这里插入图片描述

表单:用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器

函数作用
<from>表单标签定义整体表单区域
<label>表单元素的文字标注标签
<input type=“”>用户输入标签type属性:
type="text"定义单行文本输入
type="password"定义密码输入
type="radio"定义单选框
type="checkbox"定义复选框
type="file"定义上传文件
type="submit"定义提交按钮
type="reset"定义重置按钮
type="button"定义普通按钮
<textarea>多行文本输入框
<select>下拉列表option标签与select标签配合定义下拉列表中的选项
    <form>
        <p>
            <label>姓名:</label><input type="text">
        </p>
        <p>
            <label>密码:</label><input type="password">
        </p>
        <p>
            <label>性别:</label>
            <!-- 为了保证多个单选项在一个类型内,要保证每个单选项的属性名相同 -->
            <input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" /></p>
        <p>
            <label>爱好:</label>
            <input type="checkbox"> 唱歌
            <input type="checkbox"> 跳舞
            <input type="checkbox"> 其他
        </p>
        <p>
            <label>照片:</label>
            <input type="file">
        </p>
        <p>
            <label>描述:</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="确定" onclick="alert(OK)">
        </p>
    </form>

在这里插入图片描述

表单提交

函数作用
action属性设置表单数据提交地址
method属性设置表单提交方式(GET或POST)
name属性设置表单元素名称,该名称是提交数据时的参数名
value属性设置表单元素的值,该值是提交数据时参数名所对应的值
    <form action="https://www.baidu.com" method="GET">
        <p>
            <!-- value指定默认值 -->
            <label>姓名:</label><input type="text" name="username" value="11" />
        </p>
        <p>
            <label>密码:</label><input type="password" name="password" />
        </p>
        <p>
            <label>性别:</label>
            <!-- 为了保证多个单选项在一个类型内,要保证每个单选项的属性名相同 -->
            <input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" /></p>
        <p>
            <label>爱好:</label>
            <input type="checkbox" name="like" value="0" /> 唱歌
            <input type="checkbox" name="like" value="1" /> 跳舞
            <input type="checkbox" name="like" value="2" /> 其他
        </p>
        <p>
            <label>照片:</label>
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>描述:</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" name="" value="提交">
            <input type="reset" name="" value="重置">
            <input type="button" value="确定" onclick="alert(OK)">
        </p>
    </form>

在这里插入图片描述
点击提交之后,会调到指定的页面,并且会加上后缀(上面定义name的值为输入的值)
在这里插入图片描述

1.2 其他一些标签(书签、显示效果、缩写等)

函数作用
abbr
acronym
单词缩写title=“etcetera”,etc.
title=“World Wide Web”,WWW
在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效
计算机输出标签的显示效果code
kbd
tt
samp
var
计算机输出
键盘输入
打字机文本
计算机代码样本
计算机变量
address地址<address>Written by <a href="https://www.runoob.com">Python</a></address>
Written by Python
blockquote长的引用cite=“https://www.runoob.com”
cite引用、引证
dfn一个定义项目

引用


<body>
    <p><blockquote cite="https://www.runoob.com">长的引用</blockquote></p>
</body>

长的引用


<body>
    <p><cite>引用、引证</cite></p>
</body>

引用、引证


<body>
    <p><dfn>一个定义项目</dfn></p>
</body>

一个定义项目

单词缩写

    <!--在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。-->
    <!--单词缩写-->
    <abbr title="etcetera">etc.</abbr>
    <acronym title="World Wide Web">WWW</acronym>

etc.
WWW

计算机输出效果

    <!--计算机输出标签的显示效果-->
    <!-- <code>计算机输出</code>
    <kbd>键盘输入</kbd>
    <tt>打字机文本</tt>
    <samp>计算机代码样本</samp>
    <var>计算机变量</var>
    <p>
    <b>注释:</b>这些标签常用于显示计算机/编程代码。
    </p> -->

计算机输出
键盘输入
打字机文本
计算机代码样本
计算机变量

注释:这些标签常用于显示计算机/编程代码。

书签

<body>
    <!--内容太少看不出来,相当于书签-->
    <p>
        <a href="#C4">跳转到目标内容</a>
    </p>
    <h2><a id="C4">目标内容</a></h2>
</body>

二、CSS基础

CSS是层叠样式表,用来美化页面,比如设置标签文字大小、颜色、字体加粗等样式,还可以控制页面布局,比如设置浮动、定位等样式

CSS基本语法如下:

选择器{
样式规则
}

样式规则:
属性名1:属性值1
属性名2:属性值2

选择器用来选择标签,选出来

2.1 CSS引入方式

CSS引入方式:有三种引入方式,分别为:行内式、内嵌式、外链式

行内式

<body>
    <!-- 行内式 -->
    <div style="width: 100px; height: 100px; background: red">行内式</div>
</body>

内嵌式

<head>
    <style type="text/css">
        /* 作用于所有body里面的div标签 */
        div{
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <div>内嵌式</div>
</body>

外链式:将CSS代码单独使用一个.css文件,在head标签内使用link标签引入

<head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div>外链式</div>
</body>

在CSS/main.css中写入如下内容

div{
    width: 100px;
    height: 100px;
    background:red;
}

2.2 CSS选择器

标签选择器:像上面CSS的引入就是使用的标签选择器,使用标签开头如,div、p等

<body>
    <!-- 行内式 -->
    <div style="width: 100px; height: 100px; background: red">行内式</div>
</body>
<head>
    <style type="text/css">
        /* 作用于所有body里面的div标签 */
       p{
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <div>内嵌式</div>
</body>

类选择器:根据类名来选择标签,以.开头,一个类选择器可以应用于多个标签上,一个标签也可以使用多个类选择器,多个类选择器使用空格分隔

<head>
    <style type="text/css">
       .box{
            width: 100px;
            height: 100px;
        }
        .background{
            background:red;
        }
    </style>
</head>
<body>
    <div class="box background">类选择器</div>
</body>

层级选择器(后代选择器):根据层级关系选择后代标签,以选择器1 选择器2开头(这里可以是标签名,也可以是类名),定义层级标签的子标签样式(标签之间不一定是父子关系,也可以是祖孙关系

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 定义div标签的P标签样式,使用标签名 */
       div p{
            width: 100px;
            height: 100px;
            background:red;
        }
        /* 定义con类中的pink类样式,使用类名 */
        .con .pink{
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <!-- 只有div内部的p标签才有该样式 -->
    <div>
        <p>层级选择器</p>
        <p>层级选择器</p>
    </div>
    <div class="con">
        <a href="#" class="pink">层级选择器</a>
    </div>
</body>

id选择器:根据id选择标签,以#开头,元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用

<head>
    <style type="text/css">
       #box{
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <p id="box">id选择器</p>
</body>

组选择器:根据组合的选择器选择不同的标签,以分割开,如果有公共的样式设置,可以使用组选择器

<head>
    <style type="text/css">
        /* 相同样式可以组合定义,用逗号隔开 */
       .box1, .box2{
            width: 100px;
            height: 100px;
        }
        /* 不同样式单独定义 */
        .box1{
            background:red;
        }
        .box2{
            background:gold;
        }
    </style>
</head>
<body>
    <p class="box1">组选择器</p>
    <p class="box2">组选择器</p>
</body>

伪类选择器:用于向选择器添加特殊的效果,以:分割开,当用户和网站交互的时候改变显示效果可以使用伪类选择器,比如像下面代码,当鼠标不在box1范围内是red颜色,当鼠标移动到box1内,背景颜色变成了gold颜色

<head>
    <style type="text/css">
       .box1{
            width: 100px;
            height: 100px;
            background:red;
        }
        /* hover表示鼠标悬浮 */
        .box1:hover{
            background:gold;
        }
    </style>
</head>
<body>
    <p class="box1">伪类选择器</p>
</body>

2.3 CSS常用属性

布局常用属性

属性含义举例
width设置元素(标签)的宽度width:100px;
height设置元素(标签)的高度height:200px;
background设置元素背景色
或者背景图片
默认平铺no-repeat
background:gold; 设置元素的背景色
background:url(images/logo.png);设置元素的背景图片
添加no-repeat不重复,center居中,如下
background:url(images/logo.png) no-repeat center
border设置元素四周的边框border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
border-top设置顶边边框border-top:10px solid red;
border-left设置左边边框border-left:10px solid blue;
border-right设置右边边框border-right:10px solid green;
border-bottom设置底边边框border-bottom:10px solid pink;
margin设置元素边框到外界元素边框的距离margin: 10px;
padding设置内容到边框的距离padding: 10px

文本常用属性

属性含义举例
color文字颜色color:red;
font-size文字大小font-size:12px;
font-family文字字体font-family:微软雅黑为了避免中文字不兼容,一般写成:fontfamily:‘Microsoft Yahei’;
font-weight文字是否加粗font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height文字行高line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
text-decoration文字下划线text-decoration:none; 将文字下划线去掉
text-align文字水平对齐方式text-align:center 设置文字水平居中
text-indent文字首行缩进text-indent:24px;设置文字首行缩进24px

三、JavaScript

JavaScript是运行在浏览器端的脚步语言,是由浏览器解释执行的,能够让网页和用户有交互功能,增加良好的用户体验效果。前端开发三大块:HTML负责网页结构;CSS负责网页样式;JavaScript负责网页行为,比如:网页与用户的交互效果

3.1 JS使用方式

JS使用方式:行内式、内嵌式、外链式

行内式

<body>
    <!-- 点击弹出对话框 -->
    <input type="button" value="OK" onclick="alert('行内式');">
</body>

内嵌式(运行就会弹出)

<head>
    <script type="text/javascript">
        alert('内嵌式');
    </script>
</head>
<body>

</body>

外链式(运行就会弹出)
在JS/index.js文件写入如下内容

alert('外链式');

HTML内容如下

<head>
    <script type="text/javascript" src="JS/index.js"></script>
</head>
<body>
</body>

3.2 变量和数据类型

变量:JavaScript 定义变量时不需要指定变量的类型,变量类型由它的值来决定。定义变量需要用关键字var,一条JavaScript语句应该以结尾,js文件内容如下

var num = 123;
var str = 'abc';

数据类型:JS有五种基本类型和一种复杂数据类型(object)。基本类型:number数字类型、string字符串类型、boolean布尔类型(true/false)、undefined undefined类型(变量声明为初始化,,值就是undefined)、null null类型(表示空对象),复合类型为object。变量命名规则:区分大小;写第一个字符必须是字母、下划线 ()或者美元符号 ($);其他字符可以是字母、下划线、美元符或数字,js文件内容如下

// 数字类型
var num = 123;
// 字符串
var str = 'abc';
// 布尔
var bts = false;
// 未定义 undefined
var unData;
// null类型
var nullData = null;
// object类型
var obj = {
    name:"Tony",
    age:20
}

// 获取变量类型
var type = typeof(obj)
alert(type);
// 获取对象的name属性
alert(obj.name)

// 通过页面的控制台显示结果  浏览器按F12点击进入控制台(console)里面
console.log(obj.name, typeof(obj))

3.3 函数、作用域、条件语句

函数:,js文件内容如下

// 函数定义
function fnAlert1(){
    alert("函数");
}
function fnAlert2(sMsg){
    alert(sMsg);
    return 'world';
}

// 函数调用
fnAlert1();
alert(fnAlert2('hello'));

变量作用域:局部变量(如函数内)只能在局部使用,外部不能使用,全局变量可以在全局使用

条件判断ifif...elseif...else if...else。if后面到的条件需要用括号

运算符含义
==等于
===全等(默认会将符号两边的变量转换成数字再进行对比)
!=不等于(不会转换符号两边的数据类型)
>大于
<小于
>=大于等于
<=小于等于
&&
||
!
var a = 12;
var b = '12';

if(a==12){
    alert("相等");
}
else{
    alert("不相等");
}

// ==符号默认会将符号两边的变量转换成数字再进行对比,这个叫做隐式转换
if(b==12){
    alert('相等 !');
}
else{
    alert('不相等 !')
}

//“===”符号不会转换符号两边的数据类型
if(b===12){
    alert('相等 !');
}
else{
    alert('不相等 !')
}

alert(false&&true);

循环:for、while、do-while

// for循环
var a = [1,3,5,7];
for(var i = 0; i < a.length; i++){
    alert(a[i]);
    // console.log(a[i]);
}

// while循环
var i = 1;
while(i<5){
    alert(i);
    i++;
}

//do-while
var i=1
do{
    alert(i);
    i++;
}while(i<5);

数组

//实例化对象方式创建
var aList1 = new Array(1,2,3,4,5,6,7,8);

// 字面量方式创建
var aList2 = [1,2,3,'asd'];

// 多维数组
var aList3 =[[1,2,3],['a','b', 'c']];

// 数组长度
console.log(aList1.length);

// 数组值
console.log(aList1);
console.log(aList1[0]);

// 修改值
aList1[0] = 100;

// 添加数据
aList1.push(5);
console.log(aList1);

// 删除最后一个数据
aList1.pop();
console.log(aList1);

// 从下标3开始删除三个元素
aList1.splice(3, 3);
console.log(aList1);

// 在下标3的位置插入数据33, 第二个参数起作用
aList1.splice(3, 0, 33);
console.log(aList1);

// 在下标3的位置插入多个数据33, 第二个参数起作用
aList1.splice(3, 0, 33, 44, 55);
console.log(aList1);

// 替换第三个数据, 第二个参数起作用
aList1.splice(3, 1, 111);
console.log(aList1);

// 多个替换一个
aList1.splice(3, 1, 111, 222, 333);
console.log(aList1);

// 多个替换3个
aList1.splice(3, 3, 111, 222, 333);
console.log(aList1);

字符串拼接:数字和字符串拼接会自动进行类型转换(隐士类型转换),把数字类型转成字符串类型进行拼接

var str1 = 'hello';
var str2 = 'world';
result = str1 + ' ' + str2;
console.log(result);
var a='1';
// 类型转换
var b=parseInt(a);

获取标签元素:可以使用内置对象 document 上的 getElementByld方法来获取页面上设置了id属性的标签元素,获取到的是一个html对象,然后将它赋值给一个变量

<head>
    <script type="text/javascript">
        // 通过window对象的onload时间来获取标签
        // 这个事件会在页面加载完成后,再回来执行onload指定的函数
        // 不适用该方法读取为空
        window.onload = function(){
            var odiv = document.getElementById('div1');
            alert(odiv);
            // 获取文本
            alert(odiv.innerText);
        }
    </script>
</head>
<body>
    <div id="div1">div标签</div>
</body>

获取和设置属性操作:首先获取的页面标签元素,然后就可以对页面标签元素的属性进行操作,如:属性读取、设置

<head>
    <script type="text/javascript">
        // 通过window对象的onload时间来获取标签
        // 这个事件会在页面加载完成后,再回来执行onload指定的函数
        // 不适用该方法读取为空
        window.onload = function(){
            var oIn = document.getElementById('in1');
            alert(oIn);
            var oA = document.getElementById('oa');
            alert(oA);

            // 获取输出属性值
            console.log(oIn.type);
            console.log(oIn.name);
            console.log(oIn.value);
            console.log(oA.href);

            // 设置属性值
            oIn.className = 'min';
            oA.style.color= 'red';
            oA.style.fontSize = '100px';

            // 读取文本内容
            var sText = oA.innerHTML;
            console.log(sText);
            // 写入
            oA.innerHTML = '<a href="https://www.csdn.net" id="oa">CSDN</a>';
        }
    </script>
    
</head>
<body>
    <input type="text" class="myin" id="in1" name="username" value="xxxxx">
    <a href="http://www.baidu.com" id="oa">百度</a>
</body>

案例:通过点击按钮改变背景颜色

<head>
    <style>
        .case1{
            width:100px;
            height:100px;
            background:red;
        }
        .case2{
            width:100px;
            height:100px;
            background:green;
        }
        .case3{
            width:100px;
            height:100px;
            background:blue;
        }
    </style>
    
    <script type="text/javascript">
        // 定义一个函数,用来完成更换样式的操作
        function changeStyle(){
            // 得到标签,改变标签的类名属性
            var oDiv = document.getElementById('md');

            // 使用随机数,获取一个0~2之间的数
            var index = Math.round(Math.random()*2);
            if (index == 0){
                oDiv.className = 'case1';
            }else if(index == 1){
                oDiv.className = 'case2';
            }else{
                oDiv.className = 'case3';
            }
        }
    </script>
</head>

<body>
    <div class="case1" id="md">背景</div>
    <input type="button" value="切换背景" onclick="changeStyle()">
</body>

设置定时器:在一段时间后执行某段代码,JS设置定时器的方式有两种
setTimeout(func[,delaty,param1,param2,...]):指定的时间间隔(以毫秒计)调用一次函数的定时器
setInterval(func[,delaty,param1,param2,...]):指定的时间间隔(以毫秒计)重复调用一个函数的定时器

参数说明:
第一个参数func,表示定时器要执行的函数名
第二个参数delay,表示时间间隔,默认是0,单位是毫秒
第三个参数param1,表示定时器执行函数的第一个参数,以此类推传入多个执行函数对应的参数

清楚定时器:JS清楚定时器有两种
clearTimeout(timeoutID):清楚只执行一次的定时器(setTimeout函数)
clearInterval(timeoutID):清楚反复执行的定时器(setInterval函数)

参数说明:
timeoutID 为调用 setTimeout 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该setTimeout 所设定的定时执行操作。

<head>
    <script>
        // 定义函数
        function hello(){
            alert('hello');
            clearTimeout(t1);
        }
        // 设置一次性定时器,延时3秒
        var t1 = setTimeout(hello, 3000);
        alert(t1);


        // 定义重复定时器函数
        var i = 1;
        function intervalTask(msg){
            i++;
            alert(msg + i);
            // 执行三次关闭
            if(i==3){
                clearInterval(t2);
            }
        }
        //实现重复定时器
        var t2 = setInterval(intervalTask, 1000, 1);
    </script>
</head>

四、jQuery

jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript编程。jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的。jQuery简化了JavaScript编程,jQuery实现交互效果更简单。

4.1 jQuery用法

jQuery引入:从jQuery网站上将源码复制下来放到JS/jquery.js文件内,然后再html文件中使用下面代码调用

<head>
    <script src="JS/jquery.js"></script>
</head>

jQuery入口:JS获取标签元素,需要页面加载完成以后再获取,通过给onload事件属性设置了一个函数来获取标签元素,而jQuery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快。

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(document).ready(function(){
            var $d = $('#div1');
            alert('jquery获取的div: ' + $d);
        });
    </script>
</head>
<body>
    <div id="div1">div</div>
</body>

上面代码可以简写成如下:

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $d = $('#div1');
            alert('jquery获取的div: ' + $d);
        });
    </script>
</head>
<body>
    <div id="div1">div</div>
</body>

jQuery选择器:就是快速选择标签元素,获取标签的,选择规则和css样式一样,常用选择器为:标签选择器、类选择器、id选择器、层级选择器、属性选择器

在html中调用js文件:

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script src="JS/index.js"></script>
</head>

index.js代码实例如下:

$(function(){
    var $m1 = $('li');            //选择所有的1i标签
    var $m2 = $('#myId');         //选择id为myId的标签
    var $m3 = $('.myClass');      // 选择class为myclass的标签
    var $m4 = $('#ul1 li span');  //选择id为ul1标签下的所有1i标签下的span标签
    var $m5 = $('input[name=first]'); // 选择name属性等于first的input标签
    
    // 设置CSS样式   如果key中含有-,则需要用""
    $m1.css({background:'red'});

    // 可以使用length属性来判断标签是否选择成功,如果length大于0表示选择成功
    result = $("#myId").length;
    alert(result);
});

选择集过滤:在选择标签的集合里面过滤自己需要的标签
常用操作:
has(选择器名称):表示选取子标签中包含指定选择器的标签
eq(索引):表示选取指定索引的标签

has方法:选取div标签内存在id=mytext的标签

<head>
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            // has方法使用
            var $m1 = $("div").has(".mytext");
            // 最后一个
            // var $m1 = $("div").last();
            // 第一个
            // var $m1 = $("div").first();
            // 设置样式
            $m1.css({background:'red'});
        });
    </script>
</head>

<body>
    <div><p>段落一</p></div>
    <div><p class="mytext">段落二</p></div>
    <div><p>段落三</p></div>
    <div><p class="mytext">段落四</p></div>
</body>

eq方法:设置第二个背景色

<head>
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            // eq方法使用
            var $m1 = $("div").eq(1);
            // 设置样式
            $m1.css({background:'red'});
        });
    </script>
</head>
<body>
    <div><p>段落一</p></div>
    <div><p>段落二</p></div>
    <div><p>段落三</p></div>
    <div><p>段落四</p></div>
</body>

选择器转移

$(#box).prev()表示选择id是box元素的上一个的同级元素
$(#box)prevAll()表示选择id是box元素的上面所有的同级元素
$(#box).next()表示选择id是box元素的下一个的同级元素
$(#box)nextAll()表示选择id是box元素的下面所有的同级元素
$(#box).parent()表示选择id是box元素的父元素
$(#box).children()表示选择是box元素的所有子元素
$(#box)siblings()表示选择id是box元素的其它同级元素
$(#box).find(‘myClass’)表示选择id是box元素的class等于myClass的元素

对所选择元素的上一个进行样式设置

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $m1 = $(".mytext");
            // 设置样式
            $m1.prev().css({background:'red'});
        });
    </script>
</head>
<body>
    <div><p>段落一</p></div>
    <div class="mytext"><p>段落二</p></div>
    <div><p>段落三</p></div>
    <div class="mytext"><p>段落四</p></div>
</body>

获取和设置元素内容

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $m1 = $(".mytext");
            // 获取标签的htm1内容
            var result = $m1.html();
            alert(result);
            // 设置标签的html内容,之前的内容会清除/
            $m1.html("<span style='color:red'>helo</span>");
            // 追加htm1内容
            $m1.append("<span style='color:red'>world</span>");
        });
    </script>
</head>
<body>
    <div><p>段落一</p></div>
    <div class="mytext"><p>段落二</p></div>
    <div><p>段落三</p></div>
    <div class="mytext"><p>段落四</p></div>
</body>

读取和设置标签属性内容

<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $m1 = $(".mytext");
            // 获取元素属性  value值可以使用$m1.val()简写方法获取 
            var s = $m1.prop("class");
            alert(s);

            // 设置元素属性  value值可以使用$m1.val("aa")简写方法获取设置
            $m1.prop({"id":"abc","class":"text"});
        });
    </script>
</head>
<body>
    <div><p>段落一</p></div>
    <div class="mytext"><p>段落二</p></div>
    <div><p>段落三</p></div>
    <div class="mytext"><p>段落四</p></div>
</body>

4.2 jQuery事件

常用事件绑定

事件含义
click()鼠标单击
blur()元素失去焦点
focus()元素获得焦点
mouseover()鼠标进入 (进入子元素也触发)
mouseout()鼠标离开 (离开子元素也触发)
ready()DOM加载完成
<head>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $butt = $(".button");
            $butt.click(function(){
                var $m1 = $(".mytext");
                // this指当前发生事件的对象,是原生的js对象
                this.style.background = 'red';

                // $(this)值当前事件的jQuery对象
                $(this).css({'background':'red'});
                $m1.css({'background':'red'});
                // 获取jQuery对象的索引值
                alert($(this).index());
            })
        });
    </script>
</head>
<body>
    <div class="mytext"><p>段落</p></div>
    <input type="button" class="button" value="OK">
</body>

事件代理delegate):当同一个位置有多个事件绑定的时候(父子节点都绑定了事件)(先响应字标签绑定的事件,再响应父标签绑定的事件),普通方法要定位多个标签,对定位的方法进行事件绑定,如果使用事件代理,只需要绑定父标签,通过父标签代理字标签的事件

普通写法

<head>
    <style>
        #m1{
            width: 100px;
            height: 100px;
            background: red;
        }
        #m2{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $f1 = $("#m2");
            var $f2 = $("#m1");
            // 绑定两个事件
            $f1.click(function(){
                this.style.background = 'green';
            });
            $f2.click(function(){
                this.style.background = 'yellow';
            });
        });
    </script>
</head>
<body>
    <div id="m2">
        <div id="m1">
            父子标签
        </div>
    </div>
</body>

事件代理的写法delegate(父标签代理字标签)

<head>
    <style>
        #m1{
            width: 100px;
            height: 100px;
            background: red;
        }
        #m2{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
    
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            var $f1 = $("#m2");
            // 父元素来代理子元素的点击事件
            $f1.delegate('#m1', 'click', function(){
                // $(this)表示当前点击的子元素对象
                $(this).css({background:'green'});
            });
            // 父标签绑定事件
            $f1.click(function(){
                this.style.background = 'yellow';
            });
        });
    </script>
</head>

<body>
    <div id="m2">
        <div id="m1">
            父子标签
        </div>
    </div>
</body>

4.3 JS对象

<head>
    <script>
        // 使用根类Object类实例化对象
        // 这里只是在内存中开辟了一块对象空间,保存了对象的引用,对象里没有实际内容
        var oCar = new Object();
        // 给对象绑定属性和方法(类似python中的动态绑定)
        oCar.brand = 'Ben';
        oCar.number = '001';
        oCar.speed = 100;
        oCar.driver = function(){
            // this 是is中表示对象本身的一个关键字,类似 python对象中的 self
            console.log('number: '+ this.number)
        };
        console.log(oCar.number);
        oCar.driver();


        // 使用字面量形式
        var oTom = {
            name:'Toy',
            age:20,
            sing:function(){
                console.log(this.name);
            }
        };
        console.log(oTom.name);
        oTom.sing();
    </script>
</head>

五、JSON对象

json对象是一种数据格式,格式有对象格式和数组格式,对象格式的ison数据,使用一对大括号{},大括号里面放入key:value形式的键值对,多个键值对使用逗号分隔,json中的(key)属性名称和字符串值需要用双引号引起来;数组格式的json数据,使用一对中括号[],中括号里面的数据使用逗号分隔

// 对象格式
{
    "name":"Toy",
    "age":20
}

// 数组格式
["Toy",20,"programmer"]

// 实际开发格式比较复杂
{
    "name":"Toy",
    "age":20,
    "Hobby":["run","reading"],
    "school":{
        "name":"college",
        "location":"Beijing"
    }
}

json转换为JS对象JSON.parse()要用引号括起来

var s1 = '{"name":"Toy","age":20}';
var s2 = '["Toy",20,"programmer"]';

// 操作属性
var ss1 = JSON.parse(s1);
var ss2 = JSON.parse(s2);
alert(ss1.name);
alert(ss2);

六、ajax

ajax是一个前后台配合的技术,它可以让javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用aiax。在html页面使用ajax需要在web服务器环境下运行,一般向自己的web服务器发送ajax请求

ajax使用:jQuery将它封装成了一个方法$.ajax(),我们可以直接用这个方法来执行ajax请求

实例
先编写服务端代码:

import socket
import sys
import multiprocessing

def server_start(port):
    # 创建TCP服务端套接字
    server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    # 设置端口号复用,让程序退出端口号立马释放
    server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
    # 绑定端口号  绑定没有给定IP时默认本地IP地址
    server_socket.bind(('', port))
    # 设置监听
    server_socket.listen(128)

    while True:
        # 等待客户端   客户端连接后,该函数会返回两个数据,一个是客户端Socket对象,一个是客户端的地址信息
        client_socket, ip_port = server_socket.accept()
        print(f'客户端 {ip_port[0]} 使用端口 {ip_port[1]} 连接成功...')

        p = multiprocessing.Process(target=task, args=(client_socket,))
        p.start()

    # 关闭服务端
    server_socket.close()

def task(client_socket):
    # 接收客户端数据
    data = client_socket.recv(1024).decode('gbk')
    # print(data)

    # 对数据进行分隔,最大分隔次数为2
    request_list = data.split(" ", maxsplit=2)

    # 获取请求资源路劲
    request_path = request_list[1]
    print(request_path)

    # 判断请求的是否是根目录,如果条件成立,指定首页数据返回
    if request_path == "/":
        request_path = "/index.html"

    try:
        # 读取文件数据
        with open("static" + request_path, 'rb') as file:
            file_data = file.read()
    except Exception as e:
        # 文件找不到,拼接404异常报文
        # 响应行
        response_line = "HTTP/1.1 404 NOT FOUND\r\n"
        # 响应头
        response_header = "Server: PWS1.1\r\n"
        # 响应体
        with open("static/error.html", 'rb') as file:
            error_data = file.read()

        # 拼接响应报文
        response_data = (response_line + response_header + "\r\n").encode("gbk") + error_data
        # 发送数据
        client_socket.send(response_data)
    else:
        # 响应行
        response_line = "HTTP/1.1 200 ok\r\n"
        # 响应头
        response_header = "Server: PWS1.0\r\n"
        # 响应体
        response_body = file_data

        # 拼接响应报文
        response_data = (response_line + response_header + "\r\n").encode("gbk") + response_body
        # 发送数据
        client_socket.send(response_data)
    finally:
        # 关闭客户端
        client_socket.close()

if __name__ == '__main__':
    # sys.argv属性用来接收命令行参数,返回一个列表
    # 第一个参数是当前执行的程序文件,后面还可以跟其它数据,依次放到列表中
    # 取出第二个参数,用来做为当前程序的端口号
    # port = int(sys.argv[1])

    server_start(8888)

在同级目录创建data.json文件,内容如下

{
    "name":"Iphone",
    "price":5000
}

最后编写index.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <!-- 引入jQuery文件 -->
    <script src="JS/jquery.js"></script>
    <script>
        $.ajax({
            // 1.url 请求地址
            url:'data.json',
            //2.type 请求方式,默认是'GET’,常用的还有'POST'
            type:'GET',
            //3.dataType 设置返回的数据格式,常用的是 json'格式
            dataType:'JSON',
            // 4.data 设置发送给服务器的数据,没有参数不需要设置
            // data:{page:1,count:10},
            // 5.success 设置请求成功后的回调函数
            success:function (response) {
                // 实现刷新的动作
                // 利用jquery,找到页面中的标签对象,然后将接收的数据,刷新上去显示出来
                console.log(response);  // 输出到控制台
                var $ln = $('#ln').next();
                $ln.html(response.name);
                var $lp = $('#lp').next();
                $lp.html(response.price);
            },
            // 6.error 设置请求失败后的回调函数
            error:function () {
                alert("请求失败,请稍后再试!");
            },
            // 7.async 设置是否异步,默认值是'true’,表示异步,一般不用写
            async:true
        });
    </script>
    
</head>
<body>
    <label id="ln">商品:</label><label>A</label>
    <hr>
    <label id="lp">价格:</label><label>0</label>
</body>
</html>

index显示的内容原本是如下效果
在这里插入图片描述

现在使用ajax更新页码,先启动服务端代码,然后在浏览器中运行http://localhost:8888/index.html,可以看到该页面内容有所变化
在这里插入图片描述

ajax简写:可以将原来的$.ajax()简写成$.get().error()或者$.post().error(),上面的ajax代码可以简写成如下

	<script src="JS/jquery.js"></script>
    <script>
        $.get('data.json',function(response){
            // 成功执行
            var $ln = $('#ln').next();
            $ln.html(response.name);
            var $lp = $('#lp').next();
            $lp.html(response.price);
            
        }, 'json').error(function(){
            // 失败执行
            alert("请求失败,请稍后再试!");
        });
    </script>

$.get(url, data, success(data, status, xhr), dataType).error(func)
$.post(url, data, success(data, status, xhr), dataType).error(func)

ur :请求地址
data :设置发送给服务器的数据,没有参数不需要设置
success: 设置请求成功后的回调函数;data 请求的结果数据;status 请求的状态信息,比如:"success。xhr 底层发送http请求XMLHttpRequest对象
dataType:设置返回的数据格式:xml、html、text、json
error:错误异常处理

七、Web框架

web框架是专门为web服务器处理动态资源请求的一个应用程序,web框架和web服务器的关系是web框架专门服务于web服务器,给web服务器提供处理动态资源请求的服务。

WSGI协议是web服务器和web框架之间进行协同工作的规则,WSGI协议规定web服务器把动态资源的请求信息传给web框架处理,web框架把处理好的结果返回给web服务器。

利用WSGI实现动静态分离

实例:下面代码实现了打开服务器之后,浏览网页,可以从数据库读取数据填充到页面中读取数据库内容是在FrameWork.py文件里面实现,其他一些路由也在该文件内设置。在templates/index.html中有如下内容


<body>
    <div>
        <table>
            <tr>
                <td>序号</td>
                <td>代码</td>
                <td>幅度</td>
                <td>时间</td>
                <td>按钮</td>
            </tr>
            {%content%}
        </table>
    </div>
</body>

浏览localhost:8888得到该网页打开效果如下
在这里插入图片描述

利用服务器,从数据库读取内容填充进去得到的效果如下
在这里插入图片描述

服务器web.py内容如下:

import socket
import sys
import multiprocessing
import pywin.scintilla.formatter
from FrameWork import application

class StaticWebServer(object):
    def __init__(self, port):
        # 创建TCP服务端套接字
        self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        # 设置端口号复用,让程序退出端口号立马释放
        self.server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
        # 绑定端口号  绑定没有给定IP时默认本地IP地址
        self.server_socket.bind(('', port))
        # 设置监听
        self.server_socket.listen(128)

    def start(self):
        while True:
            # 等待客户端   客户端连接后,该函数会返回两个数据,一个是客户端Socket对象,一个是客户端的地址信息
            client_socket, ip_port = self.server_socket.accept()
            print(f'客户端 {ip_port[0]} 使用端口 {ip_port[1]} 连接成功...')

            p = multiprocessing.Process(target=self.task, args=(client_socket,))
            p.start()
            client_socket.close()

        # 关闭服务端
        self.server_socket.close()

    def task(self, client_socket):
        # 接收客户端数据
        data = client_socket.recv(1024).decode('gbk')
        # print(data)

        # 对数据进行分隔,最大分隔次数为2
        request_list = data.split(" ", maxsplit=2)

        # 获取请求资源路劲
        request_path = request_list[1]
        print(request_path)

        # 判断请求的是否是根目录,如果条件成立,指定首页数据返回
        if request_path == "/":
            request_path = "/index.html"

        # 当确定好请求地址后,来通过请求地址的后缀来确定请求的是静态的数据还是动态的数据
        if request_path.endswith('.html'):
            # 处理动态数据
            # 通过框架实现的application函数来得到请求的数据
            # 参数一是一个字典,用来传入 请求相关的信息,比如:请求地址
            # 参数二是一个函数引用,通过这个引用可以将响应的状态和响应头数据返回
            env = {"PATH": request_path}
            response_body = application(env, self.start_response)
            # 准备拼接响应报文
            response_line = 'HTTP/1.1 %s\r\n' % self.__status
            response_head = ''
            for t in self.__headers:
                response_head = '%s: %s\r\n' % t

            response_data = (response_line + response_head + '\r\n' + response_body).encode('utf8')
            client_socket.send(response_data)
            client_socket.close()

        else:
            # 处理静态数据
            try:
                # 读取文件数据
                with open("static" + request_path, 'rb') as file:
                    file_data = file.read()
            except Exception as e:
                # 文件找不到,拼接404异常报文
                # 响应行
                response_line = "HTTP/1.1 404 NOT FOUND\r\n"
                # 响应头
                response_header = "Server: PWS1.1\r\n"
                # 响应体
                with open("templates/error.html", 'rb') as file:
                    error_data = file.read()

                # 拼接响应报文
                response_data = (response_line + response_header + "\r\n").encode("gbk") + error_data
                # 发送数据
                client_socket.send(response_data)
            else:
                # 响应行
                response_line = "HTTP/1.1 200 ok\r\n"
                # 响应头
                response_header = "Server: PWS1.0\r\n"
                # 响应体
                response_body = file_data

                # 拼接响应报文
                response_data = (response_line + response_header + "\r\n").encode("gbk") + response_body
                # 发送数据
                client_socket.send(response_data)
            finally:
                # 关闭客户端
                client_socket.close()

    def start_response(self, status, headers):
        # 在这里,可以直接拼接响应报文中的一部分数据,也可以先保存,后拼接
        self.__status = status
        self.__headers = headers


if __name__ == '__main__':
    # sys.argv属性用来接收命令行参数,返回一个列表
    # 第一个参数是当前执行的程序文件,后面还可以跟其它数据,依次放到列表中
    # 取出第二个参数,用来做为当前程序的端口号
    # port = int(sys.argv[1])

    p = StaticWebServer(8888)
    p.start()

FrameWork.py文件内容如下:

import pymysql
#WSGI 接口方法,应该实现在框架程序中
def application(environ, start_response):
    # 通过传入的字典,将客户端请求地址拿到
    request_url = environ['PATH']
    # 准备一个响应状态
    status = '200 OK'

    if request_url == '/index.html':
        data = index()
    elif request_url == '/center.html':
        data = center()
    else:
        # 当请求的页面地址不存在时返回的数据
        data = other()
        status = '404 Not Found'

    #执行回调函数,将响应状态和响应头返回
    start_response(status, [('Server', 'Server-1.0'), ('Content-Type', 'text/html')])
    # 返回响应数据
    return data


# 首页的数据函数
# 实现思想:前后端不分离
def index():
    # 通过模板文件来读取文件内容,将页面的基本结构返回,让客户端显示
    with open('templates/index.html', 'rb') as f:
        content = f.read().decode()
    # 准备一条假数据
    row_str = """
    <tr>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td><input type="button" values="添加" systemidvalue="%s"></td>
    </tr>
    """
    # 读取数据库
    connect_db = pymysql.connect(host='localhost', port=3306, user='root', password='123456', database='msql', charset='utf8')
    # 获取游标对象
    cur = connect_db.cursor()
    # SQL语句
    sql = '''select * from t_stu;'''
    # 执行SQL语句,返回结果是SQL语句影响的行数
    row_count = cur.execute(sql)
    # 获取所有数据
    result = cur.fetchall()
    cur.close()
    connect_db.close()

    # 多准备几条
    all_data = ''
    for t in result:
        all_data += row_str % (t[0], t[1], t[2], t[3], [0])

    # 将准备好的数据,替换到模板文件内容中的占位符上去   html中的{%content%}
    content = content.replace('{%content%}', all_data)
    return content


# 首页的数据函数
def center():
    return '<h1>Center Page</h1>'


# 首页的数据函数
def other():
    return '<h1>Page Not Find</h1>'

上面FrameWork.py的路由判断if可以简写成如下内容,在加上字典和闭包

import pymysql

# 定义全局路由表字典
route_table = {}
# 定义一个闭包,接收参数,来自动维护路由表
def router(url):
    def wrapper(func):
        def inner(*args,**kwargs):
            return func(*args,**kwargs)
        # 加入路由表的维护
        route_table[url] = inner
        return inner
    return wrapper

#WSGI 接口方法,应该实现在框架程序中
def application(environ, start_response):
    ...
    
    if request_url in route_table:
        status = '200 OK'
        data = route_table[request_url]()   # ->  data = index()
    else:
        status = '404 Not Found'
        data = other()

    ...

@router('/index.html')
def index():

@router('/center.html')
def center():

# 首页的数据函数
def other():
    return '<h1>Page Not Find</h1>'

数据接口开发

# 在框架程序中,实现一个数据接口中函数,用来返json数据
# 该函数对于客户端来说,就是一次http请求
@router('/center_data.html')
def center_data():
    # 从数据库读取数据
    # 读取数据库
    connect_db = pymysql.connect(host='localhost', port=3306, user='root', password='123456', database='msql', charset='utf8')
    # 获取游标对象
    cur = connect_db.cursor()
    # SQL语句
    sql = '''select * from t_stu;'''
    # 执行SQL语句,返回结果是SQL语句影响的行数
    row_count = cur.execute(sql)
    # 获取所有数据
    result = cur.fetchall()
    cur.close()
    connect_db.close()
    # 因为读取的数据都是元组,那么要将数据转换成json格式
    json_data_list = []
    # 再将json格式的数据转换成json字符串
    for t in result:
        # 将每条数据,分解保存到一个字典中
        json_data_dict = {}
        json_data_dict['num'] = str(t[0])
        json_data_dict['code'] = str(t[1])
        json_data_dict['chg'] = str(t[2])
        json_data_dict['time'] = str(t[3])
        json_data_list.append(json_data_dict)
    # 转换json字符串
    # ensure_ascii=False  不使用ASCIIf对数据进行编程
    json_str = json.dumps(json_data_list, ensure_ascii=False)
    return json_str

在上面可以访问localhost:8888/center_data.html可以得到对应的数据,通过下面方法可以将上面得到的数据加入到localhost:8888/center.html网页中
localhost:8888/center_data.html页面如下(从数据库中读取数据,整理格式)
在这里插入图片描述

localhost:8888/center.html网页如下
在这里插入图片描述

在上面代码的基础上,下面python代码如下:

@router('/center.html')
def center():
    # 读取模板内容,将页面的基本结构框架返回给页面
    with open('templates/center.html', 'rb') as f:
        content = f.read().decode()
    # 将模板文件的容中的占位符去掉
    content = content.replace('{%content%}', '')

    return content
    # 页面再次发送 ajax的异步请求来请求数据,并显示
    # 这部分内容不在服务器端代码实现,应该实现在前端的页面代做以中
    # 这种思想实现的就是前后端分离开发


# 在框架程序中,实现一个数据接口中函数,用来返json数据
# 该函数对于客户端来说,就是一次http请求
@router('/center_data.html')
def center_data():
    # 从数据库读取数据
    # 读取数据库
    connect_db = pymysql.connect(host='localhost', port=3306, user='root', password='123456', database='msql', charset='utf8')
    # 获取游标对象
    cur = connect_db.cursor()
    # SQL语句
    sql = '''select * from t_stu;'''
    # 执行SQL语句,返回结果是SQL语句影响的行数
    row_count = cur.execute(sql)
    # 获取所有数据
    result = cur.fetchall()
    cur.close()
    connect_db.close()
    # 因为读取的数据都是元组,那么要将数据转换成json格式
    json_data_list = []
    # 再将json格式的数据转换成json字符串
    for t in result:
        # 将每条数据,分解保存到一个字典中
        json_data_dict = {}
        json_data_dict['num'] = str(t[0])
        json_data_dict['code'] = str(t[1])
        json_data_dict['chg'] = str(t[2])
        json_data_dict['time'] = str(t[3])
        json_data_list.append(json_data_dict)
    # 转换json字符串
    # ensure_ascii=False  不使用ASCIIf对数据进行编程
    json_str = json.dumps(json_data_list, ensure_ascii=False)
    return json_str

center.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/jquery.js"></script>
    <script>
      $.get('/center_data.html', function (data){
        // 通过该段代码,向服务器又数据请求,得到了json数据,就是json字符串被解析
        // 将要添加内容的标签得到
        var $table = $('table');
        // 将请求成功后的数据转换成数组并遍历
        var data_array = data;
        // 遍历时,将每条数据转换成js对象,并拼接到格式字符中
        for (var i = 0; i<data_array.length;i++){
          // 拿到数组中的每一条数据的对象,就是一个js对象
          var data_obj = data_array[i];
          var row_str = "<tr> " +
                  "<td>" + data_obj.num + "</td> " +
                  "<td>" + data_obj.code + "</td> " +
                  "<td>" + data_obj.chg + "</td> " +
                  "<td>" + data_obj.time + "</td> " +
                  "<td>" +
                  "<input type=\"button\" values=\"添加\" systemidvalue=\"" + data_obj.code + "\">" +
                  "</td> " +
                  "</tr>";
          // 将拼接后的标签,加到table标签后
          $table.append(row_str);
        }
      },'json').error(function (){
          // 请求失败
          alert("Fail");
          // $table.append('<td>未读取到数据</td>')
      });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>序号</td>
                <td>代码</td>
                <td>幅度</td>
                <td>时间</td>
                <td>按钮</td>
            </tr>
            {%content%}
        </table>
    </div>
</body>
</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3858.html
标签
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!