• AJAX学习笔记3练习

    AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客

    1.验证用户名是否可用

    需求,用户输入用户名,失去焦点-->onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用

    新建表

    前端页面

    WEB-INF下新建lib包引入依赖,要用JDBC

    后端代码

    1. package com.web;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.io.PrintWriter;
    10. import java.sql.*;
    11.  
    12. /**
    13.  * @author hrui
    14.  * @date 2023/9/3 22:11
    15.  */
    16. @WebServlet("/checkusername")
    17. public class AjaxRequestCheckName extends HttpServlet {
    18.  
    19.     @Override
    20.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    21.         //获取用户名
    22.         String username = req.getParameter("username");
    23.         //打布尔标记(一种编程模型)
    24.         boolean flag=false;
    25.         //连接数据库校验用户名是否存在
    26.         Connection conn=null;
    27.         PreparedStatement ps=null;
    28.         ResultSet rs=null;
    29.         //1.注册驱动
    30.         //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
    31.         try {
    32.             Class.forName("com.mysql.cj.jdbc.Driver");
    33.             //2.获取连接
    34.             conn= DriverManager.getConnection("xxx", "xxx", "xxx");
    35.             //3.获取执行对象
    36.             String sql="select id,name from t_user where name=?";
    37.             ps = conn.prepareStatement(sql);
    38.             ps.setString(1, username);
    39.             //4.执行sql
    40.             rs = ps.executeQuery();
    41.             //5.处理结果集
    42.             if(rs.next()){//如果只有一条的情况
    43.                 //用户名存在
    44.                 flag=true;
    45.  
    46.             }
    47.         } catch (Exception e) {
    48.             e.printStackTrace();
    49.         }finally {
    50.             if(rs!=null){
    51.                 try {
    52.                     rs.close();
    53.                 } catch (SQLException e) {
    54.                     e.printStackTrace();
    55.                 }
    56.             }
    57.             if(ps!=null){
    58.                 try {
    59.                     ps.close();
    60.                 } catch (SQLException e) {
    61.                     e.printStackTrace();
    62.                 }
    63.             }
    64.             if(conn!=null){
    65.                 try {
    66.                     conn.close();
    67.                 } catch (SQLException e) {
    68.                     e.printStackTrace();
    69.                 }
    70.             }
    71.         }
    72.  
    73.         //响应结果到浏览器
    74.         resp.setContentType("text/html;charset=utf-8");
    75.         PrintWriter writer = resp.getWriter();
    76.  
    77.         if(flag){
    78.             writer.print("用户名存在,不可用");
    79.         }else{
    80.             writer.print("用户名可用");
    81.         }
    82.     }
    83.  
    84.  
    85.  
    86.  
    87.  
    88.  
    89.  
    90.  
    91.  
    92.     public static void main(String[] args) {
    93.         try {
    94.             //Class.forName("com.mysql.cj.jdbc.Driver");
    95.             Connection conn= DriverManager.getConnection("xxx", "xxx", "xxx");
    96.             System.out.println(conn);
    97.         } catch (Exception e) {
    98.             e.printStackTrace();
    99.         }
    100.     }
    101. }

    还可以在input获得焦点时候对

    其实和input里面直接写  οnfοcus="xxx方法"  一样

    2.用户点击按钮,发送AJAX请求  显示学院列表

    测试

    现在这种情况存在的问题是是后端代码又开始拼接HTML

    能不能直接返回数据,剩下让前端处理   可以返回JSON  或者 XML

    返回JSON数据

    回顾JSON

    也可以是这样

    测试

    上面是在JS代码中创建JSON对象,数组的访问

    但是在后端返回前端时候,永远返回的都是字符串--->如何将JSON字符串转换为JSON对象呢

    测试

    下面后端就用JSON格式字符串的方式返回数据

    下面去连接下数据库

    前端

    后端

    1. package com.web;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.io.PrintWriter;
    10. import java.sql.*;
    11.  
    12. /**
    13.  * @author hrui
    14.  * @date 2023/9/3 23:57
    15.  */
    16. @WebServlet("/studys")
    17. public class AjaxRequestStudys extends HttpServlet {
    18.  
    19.     @Override
    20.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    21.         //连接数据库,查询学院
    22.         resp.setContentType("text/html;charset=utf-8");
    23.         PrintWriter writer = resp.getWriter();
    24.         StringBuilder builder=new StringBuilder();
    25.         String jsonStr="";
    26.  
    27. //        builder.append("");
    28. //        builder.append("1");
    29. //        builder.append("张三");
    30. //        builder.append("20");
    31. //        builder.append("北京大兴区");
    32. //        builder.append("");
    33. //        builder.append("");
    34. //        builder.append("2");
    35. //        builder.append("李四");
    36. //        builder.append("22");
    37. //        builder.append("北京海淀区");
    38. //        builder.append("");
    39.         //拼接一个JSON数组回去
    40.         //builder.append("[");
    41.         //用''单引号也不行 前端解析不了
    42. //        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
    43. //        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
    44. //        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
    45. //        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");
    46.         //连接数据库校验用户名是否存在
    47.         Connection conn=null;
    48.         PreparedStatement ps=null;
    49.         ResultSet rs=null;
    50.  
    51.         //1.注册驱动
    52.         //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
    53.         try {
    54.             Class.forName("com.mysql.cj.jdbc.Driver");
    55.             //2.获取连接
    56.             conn= DriverManager.getConnection("xxx", "xxx", "xxx");
    57.             //3.获取执行对象
    58.             String sql="select id,name,age,addr from t_stu";
    59.             ps = conn.prepareStatement(sql);
    60.             //4.执行sql
    61.             rs = ps.executeQuery();
    62.             //5.处理结果集
    63.             builder.append("[");
    64.             while(rs.next()){//如果只有一条的情况
    65.                 String id = rs.getString("id");
    66.                 String name = rs.getString("name");
    67.                 String age = rs.getString("age");
    68.                 String addr = rs.getString("addr");
    69.                 //{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}
    70.  
    71.                 builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");
    72.             }
    73.             //去掉最后一个{},后面的逗号
    74.             jsonStr=builder.substring(0, builder.length()-1)+"]";
    75.  
    76.         } catch (Exception e) {
    77.             e.printStackTrace();
    78.         }finally {
    79.             if(rs!=null){
    80.                 try {
    81.                     rs.close();
    82.                 } catch (SQLException e) {
    83.                     e.printStackTrace();
    84.                 }
    85.             }
    86.             if(ps!=null){
    87.                 try {
    88.                     ps.close();
    89.                 } catch (SQLException e) {
    90.                     e.printStackTrace();
    91.                 }
    92.             }
    93.             if(conn!=null){
    94.                 try {
    95.                     conn.close();
    96.                 } catch (SQLException e) {
    97.                     e.printStackTrace();
    98.                 }
    99.             }
    100.         }
    101.  
    102.  
    103.         writer.print(jsonStr);
    104.     }
    105. }

    测试

    这样拼接JSON太麻烦   使用fastjson对程序进行改进

    引入jar包

    不需要那么麻烦进行拼接

    1. package com.web;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.pojo.Student;
    5.  
    6. import javax.servlet.ServletException;
    7. import javax.servlet.annotation.WebServlet;
    8. import javax.servlet.http.HttpServlet;
    9. import javax.servlet.http.HttpServletRequest;
    10. import javax.servlet.http.HttpServletResponse;
    11. import java.io.IOException;
    12. import java.io.PrintWriter;
    13. import java.sql.*;
    14. import java.util.ArrayList;
    15. import java.util.List;
    16.  
    17. /**
    18.  * @author hrui
    19.  * @date 2023/9/3 23:57
    20.  */
    21. @WebServlet("/studys")
    22. public class AjaxRequestStudys extends HttpServlet {
    23.  
    24.     @Override
    25.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    26.         //连接数据库,查询学院
    27.         resp.setContentType("text/html;charset=utf-8");
    28.         PrintWriter writer = resp.getWriter();
    29. //        StringBuilder builder=new StringBuilder();
    30. //        String jsonStr="";
    31.  
    32.         List<Student> list=new ArrayList<>();
    33.  
    34. //        builder.append("");
    35. //        builder.append("1");
    36. //        builder.append("张三");
    37. //        builder.append("20");
    38. //        builder.append("北京大兴区");
    39. //        builder.append("");
    40. //        builder.append("");
    41. //        builder.append("2");
    42. //        builder.append("李四");
    43. //        builder.append("22");
    44. //        builder.append("北京海淀区");
    45. //        builder.append("");
    46.         //拼接一个JSON数组回去
    47.         //builder.append("[");
    48.         //用''单引号也不行 前端解析不了
    49. //        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
    50. //        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
    51. //        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
    52. //        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");
    53.         //连接数据库校验用户名是否存在
    54.         Connection conn=null;
    55.         PreparedStatement ps=null;
    56.         ResultSet rs=null;
    57.         String s="";
    58.         //1.注册驱动
    59.         //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
    60.         try {
    61.             Class.forName("com.mysql.cj.jdbc.Driver");
    62.             //2.获取连接
    63.             conn= DriverManager.getConnection("xxx", "xxx", "xxx");
    64.             //3.获取执行对象
    65.             String sql="select id,name,age,addr from t_stu";
    66.             ps = conn.prepareStatement(sql);
    67.             //4.执行sql
    68.             rs = ps.executeQuery();
    69.             //5.处理结果集
    70.             //builder.append("[");
    71.             while(rs.next()){//如果只有一条的情况
    72.                 String id = rs.getString("id");
    73.                 String name = rs.getString("name");
    74.                 String age = rs.getString("age");
    75.                 String addr = rs.getString("addr");
    76.                 //{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}
    77.  
    78.                 //builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");
    79.  
    80.                 Student stu=new Student(id,name,age,addr);
    81.                 list.add(stu);
    82.             }
    83.             //去掉最后一个{},后面的逗号
    84.             //jsonStr=builder.substring(0, builder.length()-1)+"]";
    85.             s = JSON.toJSONString(list);
    86.         } catch (Exception e) {
    87.             e.printStackTrace();
    88.         }finally {
    89.             if(rs!=null){
    90.                 try {
    91.                     rs.close();
    92.                 } catch (SQLException e) {
    93.                     e.printStackTrace();
    94.                 }
    95.             }
    96.             if(ps!=null){
    97.                 try {
    98.                     ps.close();
    99.                 } catch (SQLException e) {
    100.                     e.printStackTrace();
    101.                 }
    102.             }
    103.             if(conn!=null){
    104.                 try {
    105.                     conn.close();
    106.                 } catch (SQLException e) {
    107.                     e.printStackTrace();
    108.                 }
    109.             }
    110.         }
    111.  
    112.  
    113.         writer.print(s);
    114.     }
    115. }

    测试

    下面用XML进行数据交互(XML体积大,现在相对用的少)

    后端代码   注意下Content-Type

    1. @WebServlet("/xmlstudys")
    2. public class AjaxRequestXML extends HttpServlet {
    3.  
    4.     @Override
    5.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    6.         //注意响应类型是XML
    7.         resp.setContentType("text/xml;charset=utf-8");
    8.         PrintWriter writer = resp.getWriter();
    9.         StringBuilder xml=new StringBuilder();
    10.         /*
    11.         XML格式
    12.         <Students>
    13.              <Student>
    14.                 <id>1</id>
    15.                 <name>张三</name>
    16.                 <age>22</age>
    17.                 <addr>北京大兴区</addr>
    18.              </Student>
    19.              <Student>
    20.                 <id>2</id>
    21.                 <name>李四</name>
    22.                 <age>23</age>
    23.                 <addr>北京海淀区</addr>
    24.              </Student>
    25.         </Students>
    26.          */
    27.         xml.append("");
    28.         xml.append("");
    29.         xml.append("1");
    30.         xml.append("张三");
    31.         xml.append("22");
    32.         xml.append("北京大兴区");
    33.         xml.append("");
    34.         xml.append("");
    35.         xml.append("2");
    36.         xml.append("李四");
    37.         xml.append("23");
    38.         xml.append("北京海淀区");
    39.         xml.append("");
    40.         xml.append("");
    41.         writer.print(xml);
    42.     }
    43. }

    前端代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用XML完成数据交互</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9.     window.onload=function(){
    10.         document.getElementById("btn").onclick=function(){
    11.             var xhr=new XMLHttpRequest();
    12.             xhr.onreadystatechange=function (){
    13.                 if(this.readyState==4){
    14.                     if(this.status==200){
    15.                         //服务器响应XML字符串,如何接收
    16.                         //使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)
    17.                         var xmlDoc=this.responseXML;
    18.                         console.log(xmlDoc)
    19.  
    20.                     }else{
    21.  
    22.                     }
    23.                 }
    24.             }
    25.             xhr.open("get","/ajax/xmlstudys",true)
    26.             //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    27.             xhr.send()
    28.         }
    29.     }
    30. </script>
    31.  
    32.  
    33. <input type="button" value="显示学生列表" id="btn">
    34.  
    35. <table width="50%" border="1px">
    36.     <tr>
    37.         <th>序号</th>
    38.         <th>姓名</th>
    39.         <th>年龄</th>
    40.         <th>住址</th>
    41.     </tr>
    42.     <tbody id="stubody">
    43.     <!--        <tr>-->
    44.     <!--            <td>1</td>-->
    45.     <!--            <td>张三</td>-->
    46.     <!--            <td>20</td>-->
    47.     <!--            <td>北京大兴区</td>-->
    48.     <!--        </tr>-->
    49.     <!--        <tr>-->
    50.     <!--            <td>2</td>-->
    51.     <!--            <td>李四</td>-->
    52.     <!--            <td>22</td>-->
    53.     <!--            <td>北京海淀区</td>-->
    54.     <!--        </tr>-->
    55.     </tbody>
    56. </table>
    57. </body>
    58. </html>

    测试

    具体前端代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用XML完成数据交互</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9.     window.onload=function(){
    10.         document.getElementById("btn").onclick=function(){
    11.             var xhr=new XMLHttpRequest();
    12.             xhr.onreadystatechange=function (){
    13.                 if(this.readyState==4){
    14.                     if(this.status==200){
    15.                         //服务器响应XML字符串,如何接收
    16.                         //使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)
    17.                         var xmlDoc=this.responseXML;
    18.                         console.log(xmlDoc)
    19.                         //获取所有<student>元素,返回了多个对象,是个数组
    20.                         var students=xmlDoc.getElementsByTagName("student")
    21.                         console.log(students[0].nodeName)
    22.                         var html=""
    23.                         for(var i=0;i<students.length;i++){
    24.                             var stu=students[i]
    25.                             //获取<student>节点下所有子元素
    26.                             var s=stu.childNodes;
    27.                             html+=""
    28.                             for(var j=0;j<s.length;j++){
    29.                                 var node=s[j]
    30.                                 if(node.nodeName=="id"){
    31.                                     console.log("id="+node.textContent)
    32.                                     html+=""+node.textContent+""
    33.                                 }
    34.                                 if(node.nodeName=="name"){
    35.                                     console.log("name="+node.textContent)
    36.                                     html+=""+node.textContent+""
    37.                                 }
    38.                                 if(node.nodeName=="age"){
    39.                                     console.log("age="+node.textContent)
    40.                                     html+=""+node.textContent+""
    41.                                 }
    42.                                 if(node.nodeName=="addr"){
    43.                                     console.log("addr="+node.textContent)
    44.                                     html+=""+node.textContent+""
    45.                                 }
    46.                             }
    47.                             html+=""
    48.                         }
    49.  
    50.                         document.getElementById("stubody").innerHTML=html
    51.                     }else{
    52.  
    53.                     }
    54.                 }
    55.             }
    56.             xhr.open("get","/ajax/xmlstudys",true)
    57.             //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    58.             xhr.send()
    59.         }
    60.     }
    61. </script>
    62.  
    63.  
    64. <input type="button" value="显示学生列表" id="btn">
    65.  
    66. <table width="50%" border="1px">
    67.     <tr>
    68.         <th>序号</th>
    69.         <th>姓名</th>
    70.         <th>年龄</th>
    71.         <th>住址</th>
    72.     </tr>
    73.     <tbody id="stubody">
    74.     <!--        <tr>-->
    75.     <!--            <td>1</td>-->
    76.     <!--            <td>张三</td>-->
    77.     <!--            <td>20</td>-->
    78.     <!--            <td>北京大兴区</td>-->
    79.     <!--        </tr>-->
    80.     <!--        <tr>-->
    81.     <!--            <td>2</td>-->
    82.     <!--            <td>李四</td>-->
    83.     <!--            <td>22</td>-->
    84.     <!--            <td>北京海淀区</td>-->
    85.     <!--        </tr>-->
    86.     </tbody>
    87. </table>
    88. </body>
    89. </html>

  • 相关阅读:
    Windows下载安装RabbitMQ客户端（2024最新篇）
    （附源码）APP+springboot个人健康管理 毕业设计 202031
    《Scratch等级考试（1~4级）历届真题解析》专栏总目录
    禅道登录-调用API方式
    国内领先的五大API接口供应商
    Spring中Bean的生命周期
    Spring MVC（一）【什么是Spring MVC】
    【C++】类和对象——构造函数
    训练第一个MMClassification模型
    在beforeDestroy中销毁localStorage中的值无效
  • 原文地址：https://blog.csdn.net/tiantiantbtb/article/details/132656215