初见Ajax的认知与理解 二

AJAX(Asynchronous JavaScript And XML 异步的JavaScript和XML)


上期说要新添一个需求:新增一个修改密码的接口,前端再增加一个修改密码的页面,请求和返回都使用JSON,要求复用数据库连接,合并读取html文件。

1、新增一个修改密码的接口

UserMapper接口部分:

package com.example.mapper;
import com.example.pojo.User;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface UserMapper {
 User selectAll(@Param("userName")String username, @Param("passWord")String password);
 int update(User user);
}

添加UserMapper的xml文件:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.UserMapper">
 <select id="selectAll" resultType="User">
 select userName as username ,passWord as password from user where username = #{userName} and password=#{passWord};
 </select>
 <update id="update">
 update user set password = #{passWord} where username = #{userName};
 </update>
</mapper>

2、在前端新增一个修改密码的页面

创建一个ajax-demo2.html

<!DOCTYPE html>
<html>
<h1>修改密码</h1>
 <head>
 </head>
 <body>
 <form id="form2" action="http://localhost:8080/addUser3" method="post" accept-charset="UTF-8" onsubmit="return false">
 <p>修改密码</p>
 <input type="text" name="userName" placeholder="用户名">
 <input type="text" name="passWord" placeholder="密码"/>
 <input type="submit" value="提交" onclick="asd()"/>
 </form>
 </body>
</html>

要实现从ajax-demo.html页面跳转到ajax-demo2.html上的功能,就得在ajax-demo.html上增加一个修改密码按钮并实现跳转。
ajax-demo.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form1" action="##" method="post" accept-charset="UTF-8" onsubmit="return false">
 <p>校验</p>
 <input type="text" name="userName" id="txtUserName" placeholder="用户名"/>
 <input type="text" name="passWord" id="txtPassWord" placeholder="密码"/>
 <input type="submit" value="提交" onclick="fun()"/>
</form>
<button onclick="tz()">修改密码</button>
<script>
 function tz(){
 //将这个点击事件的URL指向/hello2
 window.location.href="http://localhost:8080/hello2";
 }
 function fun(){
 const back = new XMLHttpRequest();
 let name = {"userName":form1.userName.value,"passWord":form1.passWord.value}
 let userName = JSON.stringify(name);
 back.onload = function(){
 //判断true 、false
 if(this.responseText == "true"){
 //密码账号正确
 alert("密码账号正确");
 }else{
 //密码账号错误
 alert("密码账号错误");
 }
 }
 alert(userName);
 back.open("POST","http://localhost:8080/addUser2");
 back.setRequestHeader("Content-type","application/json;charset=UTF-8");//可以发送json格式字符串
 back.send(userName);
 }
</script>
</body>
</html>

在DemoApplication部分,让hello2读取ajax-demo2.html文件。

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
 String flag = null;
 public static void main(String[] args) {
 SpringApplication.run(DemoApplication.class, args);
 }
 /*
 * 实现账号密码校验的功能
 * */
 @RequestMapping("/addUser2")
 public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(result);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 //登入
 String userName = people.userName;
 String passWord = people.passWord;
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 SqlSession sqlSession = sqlSessionFactory.openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 User users =userMapper.selectAll(userName, passWord);
 System.out.println(users);
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //数据库数据与userName、passWord做比较
 boolean flag = false;
 if (users != null) {
 flag = true;
 } else {
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
 /*
 * 读取ajax-demo2.html
 * */
 @GetMapping("/hello1")
 public String hello1() {
 String str ;
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
 while ((str = in.readLine()) != null) {
 System.out.println(str);
 htmlStr =htmlStr + "\n" +str;
 }
 System.out.print(htmlStr);
 } catch (IOException e) {
 System.out.print("错误");
 }
 return htmlStr;
 }
 @GetMapping("/hello2")
 public String hello2() {
 String str ;
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
 while ((str = in.readLine()) != null) {
 System.out.println(str);
 htmlStr =htmlStr + "\n" +str;
 }
 System.out.print(htmlStr);
 } catch (IOException e) {
 System.out.print("错误");
 }
 return htmlStr;
 }
}

测试一下:

3、请求和返回都使用JSON

ajax-demo2.html通过单击事件执行asd(),将浏览器的数据提交到服务端(/addUser3)。并添加返回功能返回到校验界面。
ajax-demo2.html部分

<!DOCTYPE html>
<html>
<h1>修改密码</h1>
 <head>
 </head>
 <body>
 <form id="form2" action="http://localhost:8080/addUser3" method="post" accept-charset="UTF-8" onsubmit="return false">
 <p>修改密码</p>
 <input type="text" name="userName" placeholder="用户名">
 <input type="text" name="passWord" placeholder="密码"/>
 <input type="submit" value="提交" onclick="asd()"/>
 </form>
 <button onclick="tz()" >返回</button>
 <script>
 function tz(){
 window.location.href="http://localhost:8080/hello1";
 }
 function asd(){
 const back = new XMLHttpRequest();
 let name = {"userName":form2.userName.value,"passWord":form2.passWord.value};
 let userName = JSON.stringify(name);
 back.onload = function(){
 //判断true 、false
 if(this.responseText == "true"){
 //密码重置成功
 alert("密码重置成功");
 }else{
 //没有相关的账号
 alert("没有相关的账号");
 }
 }
 alert(userName);
 back.open("POST","http://localhost:8080/addUser3");
 back.setRequestHeader("Content-type","application/json;charset=UTF-8");//可以发送json格式字符串
 back.send(userName);
 }
 </script>
 </body>
</html>

DemoApplication部分:
添加addUser3 实现修改密码的功能

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
 public static void main(String[] args) {
 SpringApplication.run(DemoApplication.class, args);
 }
 /*
 * 实现账号密码校验的功能
 * */
 @RequestMapping("/addUser2")
 public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(result);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 //登入
 String userName = people.userName;
 String passWord = people.passWord;
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 SqlSession sqlSession = sqlSessionFactory.openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 User users =userMapper.selectAll(userName, passWord);
 System.out.println(users);
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //数据库数据与userName、passWord做比较
 boolean flag = false;
 if (users != null) {
 flag = true;
 } else {
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
 /*
 * 读取ajax-demo2.html
 * */
 @GetMapping("/hello1")
 public String hello1() {
 String str ;
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
 while ((str = in.readLine()) != null) {
 System.out.println(str);
 htmlStr =htmlStr + "\n" +str;
 }
 System.out.print(htmlStr);
 } catch (IOException e) {
 System.out.print("错误");
 }
 return htmlStr;
 }
 @GetMapping("/hello2")
 public String hello2() {
 String str ;
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
 while ((str = in.readLine()) != null) {
 System.out.println(str);
 htmlStr =htmlStr + "\n" +str;
 }
 System.out.print(htmlStr);
 } catch (IOException e) {
 System.out.print("错误");
 }
 return htmlStr;
 }
 /*
 * 实现修改密码的功能
 * */
 @RequestMapping("/addUser3")
 public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
 String contentType = request.getContentType();
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(contentType);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 String userName = people.userName;
 String passWord = people.passWord;
 //修改密码
 User user = new User();
 user.setUserName(userName);
 user.setPassWord(passWord);
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 SqlSession sqlSession = sqlSessionFactory.openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 int update = userMapper.update(user);
 System.out.println(update);
 //提交事务
 sqlSession.commit();
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //判断数据库是否做出修改
 boolean flag = false;
 if (update !=0) {
 flag = true;
 } else {//update为0则没有做出修改
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
}

测试一下

结果符合预期。
流程跑通畅了,接下来就该思考如何将两次读取文件的操作合并(hello1和hello2)。

4、合并两次读取文件的操作

为什么要合并读取文件的操作呢?别看现在的需求要读取的文件少,比较方便。那万一以后的需求要读取几十个文件呢?我得读取一个文件就得写一次,那还得了。

那该怎么实现合并这个操作呢?
拼接字符串似乎是一个不错的选择。将要拼接的部分(ajax_demo.html、ajax_demo2.html)相似的地方提取出来,不一样的地方通过传参的方式返回不就行了吗?说干就干。
我们创建一个hello3,定义一个String类型的变量a(这个变量的值通过传参的方式获得),将相似的部分用字符串写死,不一样的部分通过变量a替代("src/webapp/"+a +".html")。
DemoApplication部分:

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
 String flag = null;
 public static void main(String[] args) {
 SpringApplication.run(DemoApplication.class, args);
 }
 @RequestMapping("/hello3")
 public String hello3( HttpServletRequest request) throws IOException {
 String flag = request.getParameter("flag");
 String a = "";
 System.out.println(flag);
 if (flag == null){//只会执行一次,做为变量a没有传递回来之前的默认值。
 a ="ajax-demo";
 }else{
 a = flag;
 }
 System.out.println(a);
 String str ="";
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
 while ((str = in.readLine()) != null) {
 htmlStr =htmlStr + "\n" +str;
 }
 } catch (IOException e) {
 System.out.print("错误");
 }
 System.out.println(htmlStr);
 return htmlStr;
 }
 /*
 * 实现账号密码校验的功能
 * */
 @RequestMapping("/addUser2")
 public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(result);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 //登入
 String userName = people.userName;
 String passWord = people.passWord;
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 SqlSession sqlSession = sqlSessionFactory.openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 User users =userMapper.selectAll(userName, passWord);
 System.out.println(users);
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //数据库数据与userName、passWord做比较
 boolean flag = false;
 if (users != null) {
 flag = true;
 } else {
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
 /*
 * 实现修改密码的功能
 * */
 @RequestMapping("/addUser3")
 public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
 String contentType = request.getContentType();
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(contentType);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 String userName = people.userName;
 String passWord = people.passWord;
 //修改密码
 User user = new User();
 user.setUserName(userName);
 user.setPassWord(passWord);
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 SqlSession sqlSession = sqlSessionFactory.openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 int update = userMapper.update(user);
 System.out.println(update);
 //提交事务
 sqlSession.commit();
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //判断数据库是否做出修改
 boolean flag = false;
 if (update !=0) {
 flag = true;
 } else {//update为0则没有做出修改
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
}

html部分:
以ajax-demo.html举例:
在tz()下将ajax-demo2.html使用post请求将数据传递给/hello3.

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 <form id="form1" action="##" method="post" accept-charset="UTF-8" onsubmit="return false">
 <p>校验</p>
 <input type="text" name="userName" id="txtUserName" placeholder="用户名"/>
 <input type="text" name="passWord" id="txtPassWord" placeholder="密码"/>
 <input type="submit" value="提交" onclick="fun()"/>
 </form>
 <button onclick="tz()">修改密码</button>
 <script>
 function tz(){
 var flag = "ajax-demo2";
 const back1 = new XMLHttpRequest();
 back1.open("POST","http://localhost:8080/hello3");
 back1.send('flag='+flag);
 window.location.href="http://localhost:8080/hello3?flag="+flag;
 }
 function fun(){
 const back = new XMLHttpRequest();
 let name = {"userName":form1.userName.value,"passWord":form1.passWord.value}
 userName="+name+"&&passWord="+psd;
 let userName = JSON.stringify(name);
 back.onload = function(){
 //判断true 、false
 if(this.responseText == "true"){
 //密码账号正确
 alert("密码账号正确");
 }else{
 //密码账号错误
 alert("密码账号错误");
 }
 }
 alert(userName);
 back.open("POST","http://localhost:8080/addUser2");
 back.setRequestHeader("Content-type","application/json;charset=UTF-8");//可以发送json格式字符串
 back.send(userName);
 }
 </script>
 </body>
</html>

ajax-demo2.html同上。
测试一下!
在浏览器上输入http://localhost:8080/hello3;

ok,功能没有问题,接下来就是复用数据库连接了。咱只要把加载数据库等信息放入构造函数中,然后在需要使用的时候引用这个构造函数即可。

5、复用数据库连接

创建一个构造函数Sql

package com.example;
public class Sql {
 SqlSessionFactory Sql() throws IOException {
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 return sqlSessionFactory;
 }
}

然后将DemoApplication中配置数据库的部分一一替代:

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
 String flag = null;
 public static void main(String[] args) {
 SpringApplication.run(DemoApplication.class, args);
 }
 @RequestMapping("/hello3")
 public String hello3( HttpServletRequest request) throws IOException {
 String flag = request.getParameter("flag");
 String a = "";
 System.out.println(flag);
 if (flag == null){//只会执行一次,做为变量a没有传递回来之前的默认值。
 a ="ajax-demo";
 }else{
 a = flag;
 }
 System.out.println(a);
 String str ="";
 String htmlStr="";
 try {
 BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
 while ((str = in.readLine()) != null) {
 htmlStr =htmlStr + "\n" +str;
 }
 } catch (IOException e) {
 System.out.print("错误");
 }
 System.out.println(htmlStr);
 return htmlStr;
 }
 /*
 * 实现账号密码校验的功能
 * */
 @RequestMapping("/addUser2")
 public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line); 
 result =result + "\n" +line;
 }
 System.out.println(result);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 //登入
 String userName = people.userName;
 String passWord = people.passWord;
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 Sql sql = new Sql();
 SqlSession sqlSession = sql.Sql().openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 User users =userMapper.selectAll(userName, passWord);
 System.out.println(users);
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //数据库数据与userName、passWord做比较
 boolean flag = false;
 if (users != null) {
 flag = true;
 } else {
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
 /*
 * 实现修改密码的功能
 * */
 @RequestMapping("/addUser3")
 public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
 String contentType = request.getContentType();
 ServletInputStream is = request.getInputStream();
 BufferedReader br = new BufferedReader(new InputStreamReader(is));
 String line=null;
 String result="";
 while((line=br.readLine())!=null){
 System.out.println(line);
 result =result + "\n" +line;
 }
 System.out.println(contentType);
 //提取JSON中的值
 ObjectMapper mapper = new ObjectMapper();
 People people = mapper.readValue(result,People.class);
 String userName = people.userName;
 String passWord = people.passWord;
 //修改密码
 User user = new User();
 user.setUserName(userName);
 user.setPassWord(passWord);
 //查询数据库
 String resource = "mybatis-config.xml";
 InputStream inputStream = Resources.getResourceAsStream(resource);
 SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
 //2.获取SqlSession对象
 Sql sql = new Sql();
 SqlSession sqlSession = sql.Sql().openSession();
 //3.获取Mapper接口的代理对象
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 //4.执行方法
 int update = userMapper.update(user);
 System.out.println(update);
 //提交事务
 sqlSession.commit();
 //释放资源
 sqlSession.close();
 System.out.println(result);
 //判断数据库是否做出修改
 boolean flag = false;
 if (update !=0) {
 flag = true;
 } else {//update为0则没有做出修改
 flag = false;
 }
 //返回一个Boolean
 response.getWriter().write("" + flag);
 return null;
 }
}

大功告成,可以使用 show ststus like 'Threads%'; 可以在MySQL命令行中查看数据库连接的情况。

作者:爱摇头的电风扇原文地址:https://segmentfault.com/a/1190000043418912

%s 个评论

要回复文章请先登录注册