Hi 👋 欢迎来逛逛~
可关注知乎 RSS Telegram Twitter…

AJAX Li.070

AJAX 介绍 AJAX(Asynchronous JavaScript And XML): 异步的JavaScript和XML 本身不是新技术, 而是多个技术的综合. 用于快速创建动态网页的技术. 一般的负面如果需要更新内容, 必需重新加载整个页面而AJAX通过浏览器与服务器进行少量数据交换, 不可以使网页异步更新. 不重新加载整个页面, 对网页部分内容局部更新原生JavaScript 实现AJAX 核心对象：xMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。打开链接：open(method,url,async) method ：请求的类型 GET 或 POST. url：请求资源的路径, async：true(异步) 或false(同步）。发送请求：send(String params) params：请求的参数(POST 专用）。处理响应：onreadystatechange readyState ：0-请求末初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。 status：200-响应已全部OK。获得响应数据形式 response Text ：获得字符串形式的响应数据。 responseXML：获得XML形式的响应 jQuery的Get方式实现AJAX 核心语法：$.get(url,[data],[callback],[type]); url：请求的资源路径 data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象 callback ：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码 type : 预期的返回数据的类型, 取值可以是xml, html, js, ison, text等 @WebServlet("/userServlet") public class UserServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req....

jQuery二Li.069

jQuery DOM 常用方法方法作用 html() 获取标签的文本 html(value) 设置标签的文本内容,解析标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作文本</title> </head> <body> <div id="div">我是div</div> <input type="button" id="btn1" value="获取div的文本"> <input type="button" id="btn2" value="获取div的文本"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // html() 获取标签的文本 let div = $("div"); // html(value) 设置标签的文本内容,解析标签 let btn1 = $("#btn1") btn1.click(cc1) function cc1() { alert(div.html()) } let btn2 = $("#btn2") btn2.click(cc2) function cc2(){ div.html("<b>小明</b>") } </script> </html> jQuery 操作对象方法作用 $("元素") 创建指定元素 append(element) 添加成最后一个子元素,由添加者对象调用 appendTo(element) 添加成最后一个子元素,由被添加者对象调用 prepend(element) 添加成第一个子元素,由添加者对象调用 prependTo(element) 添加成第一个子元素,由被添加者对象调用 before(element) 添加到当前元素的前面,两者是兄弟关系,由添加者对象调用 after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 remove() 删除指定元素(自己移除自己) empty() 清空指定元素的所有子元素 <!...

jQuery一Li.068

jQuery 介绍 jQuery是一个JavaScript库封装了很多预定义的函数, 获取元素, 执行隐藏移动等目的就是在使用时直接调用, 不需要再重复定义, 这样就可以极大地简化了JavaScript编程 jQuery 快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门jQuery</title> </head> <body> <div id="div">我是div</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // let div = document.getElementById("div"); // alert(div.innerText) // jQuery 方式 let jqDiv = $("#div"); alert(jqDiv) alert(jqDiv.html()) </script> </html> JS对象和jQuery对象黑的 jQuery本质上虽然也是JS, 但如果想使用jQuery的属性和方法那么必须保证对象是jQuery对象, 而不是JS方式获得的DOM对象二者的API方法不能混合使用, 若想使用对方的API, 需要进行对象转换 JS的DOM对象黑的成jQuery对象 $(JS的DOM对象); jQuery对象转换成jQuery对象 jQuery对象[索引]; jQuery对象.get(索引); <body> <div id="div">我是div</div> </body> <script src="....

JavaScript二Li.067

JavaScript 面向对象, 类的定义和使用定义格式 class 类名{ constructor(变量列表){ 变量赋值; } 方法名(参数列表){ 方法体; return 返回值; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类的定义和使用</title> </head> <body> </body> <script> class Person{ constructor(name,age) { this.name = name this.age = age } // show method show(){ document.write(this.name+" "+this.age+"<br/>"); } eat(){ document.write("吃饭<br>"); } } let p = new Person("张三",23) p.show() p.eat() </script> </html> 字面量定义类和使用 let 对象名 = { 变量名 : 变量值, 变量名 : 变量值, ....

JavaScript一Li.066

JavaScript JS的2种引入方式直接在页面写在页面引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <button id="btn">点我呀</button>  <script type="text/javascript"> document.getElementById("btn").onclick = function (){ alert("点我干嘛") } </script> <script src="js/my.js"></script> </body> </html> 输入输出语句输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”); 页面内容输出 document.write(“显示内容”); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入输出语句</title> </head> <body> <script> /* * 输入框 * prompt("提示内容"); * 弹出警告框 * alert("提示内容"); * 控制台输出 * console....

MyBatis框架三Li.065

注解开发MyBatis 操作创建接口和查询方法在核心配置文件中配置映射关系编写测试类 package com.lizicai.mapper; import com.lizicai.bean.Student; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; public interface StudentMapper { // 查询 @Select( "SELECT * FROM student") public abstract List<Student> selectAll(); // 插入数据 @Insert("INSERT INTO student VALUES (#{id},#{name},#{age})") public abstract Integer insert(Student stu); // 修改数据 @Update("UPDATE student SET name=#{name},age=#{age} WHERE id=#{id}" ) public abstract Integer update(Student stu); // 删除数据 @Delete("DELETE FROM student WHERE id=#{id}") public abstract Integer delete(Integer id); } <?...

MyBatis框架二Li.064

接口代理方式实现Dao层接口代理方式-实现规则传统方式实现Dao 层，我们既要写接口，还要与实现类。而MyBatis框架可以帮助我们省略编写 Dao 层接口实现类的步骤程序员只需要编写接口，由MyBatis 框架根据接口的定义来创建该接口的动态代理对象。实现规则映射配置文件中的名称空间必须和 Dao 层接口的全类名相同。映射配置文件中的增删改查标签的 id 属性必须和 Dao 层接口的方法名相同。映射配置文件中的增删改查标签的 parameterType 属性必须和 Dao 层接口方法的参数相同。映射配置文件中的增删改查标签的 resultType 属性必须和 Dao 层接口方法的返回值相同。获取动态代理对象 SqlSession功能类中的getMapper()方法 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTA Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  <mapper namespace="com.lizicai.mapper.StudentMapper">  <select id="selectAll" resultType="student"> SELECT * FROM student </select> <select id="selectById" resultType="student" parameterType="int"> SELECT * FROM student WHERE id = #{id} </select> <insert id="insert" parameterType="student"> INSERT INTO student VALUES (#{id},#{name},#{age}) </insert> <update id="update" parameterType="student"> UPDATE student SET name=#{name},age=#{age} WHERE id=#{id} </update> <delete id="delete" parameterType="int"> DELETE FROM student WHERE id=#{id}; </delete> </mapper package com....

MyBatis框架一Li.063

MyBatis 介绍 MyBatis 是一个优秀的基于Java 的特久层框架，它内部封装了JDBC，使开发者只需要关注SQL语句本身，而不需要花费精力去处理加载驱动、创建连接、创建执行者等复杂的操作。 MyBatis通过xml 或注解的方式将要执行的各种Statement 配置起来，并通过Java对象和 Statement中 SQL 的动态参数进行映射生成最终要执行的SQL 语句。最后MyBatis 框架执行完 SQL 并将结果映射为 Java 对象并返回。采用ORM 思想解决了实体和数据库映射的问题，对JDBC 进行了封装，屏蔽了 JDBC API 底层访问细节，使我们不用与JDBC API打交道，就可以完成对数据库的持久化操作。 MyBatis 使用示例导入mariadb-java-client-2.7.4.jar和mybatis-3.5.7.jar CREATE DATABASE db1; use db1; create table student( id int auto_increment primary key , NAME VARCHAR(20), age int ); INSERT INTO student VALUES (null,'张三',23),(null,'李四',24),(null,'王五',25); public class Student { private Integer id; private String name; private Integer age; ...略 } package com....