AJAX study notes 3 exercises

AJAX Study Notes 2 Send Post Request_biubiubiu0706's Blog-CSDN Blog

1. Verify that the username is available

Requirements, the user enters the username and loses focus-->onblur loses focus event, sends an AJAX POST request to verify whether the username is available

Create new table

front page

Create a new lib package under WEB-INF to introduce dependencies, and use JDBC

backend code

package com.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

/**
 * @author hrui
 * @date 2023/9/3 22:11
 */
@WebServlet("/checkusername")
public class AjaxRequestCheckName extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取用户名
        String username = req.getParameter("username");
        //打布尔标记(一种编程模型)
        boolean flag=false;
        //连接数据库校验用户名是否存在
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        //1.注册驱动
        //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            //2.获取连接
            conn= DriverManager.getConnection("xxx", "xxx", "xxx");
            //3.获取执行对象
            String sql="select id,name from t_user where name=?";
            ps = conn.prepareStatement(sql);
            ps.setString(1, username);
            //4.执行sql
            rs = ps.executeQuery();
            //5.处理结果集
            if(rs.next()){//如果只有一条的情况
                //用户名存在
                flag=true;

            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }

        //响应结果到浏览器
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        if(flag){
            writer.print("<font color='red'>用户名存在,不可用</font>");
        }else{
            writer.print("<font color='green'>用户名可用</font>");
        }
    }









    public static void main(String[] args) {
        try {
            //Class.forName("com.mysql.cj.jdbc.Driver");
            Connection conn= DriverManager.getConnection("xxx", "xxx", "xxx");
            System.out.println(conn);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

You can also clear the data in <span when the input gets focus.

In fact, it is the same as writing οnfοcus="xxx method" directly in the input.

2. The user clicks the button and sends an AJAX request to display the list of colleges.

test

The problem with this situation now is that the back-end code starts splicing HTML again

Can you return the data directly and let the front-end handle the rest? Can you return JSON or XML?

Return JSON data

ReviewJSON

It can also be like this

test

The above is the creation of JSON objects and access to arrays in JS code

But when the backend returns to the frontend, it always returns a string ---> How to convert a JSON string into a JSON object?

test

The following backend returns data in the form of JSON format string.

Next, connect to the database

front end

rear end

package com.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

/**
 * @author hrui
 * @date 2023/9/3 23:57
 */
@WebServlet("/studys")
public class AjaxRequestStudys extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //连接数据库,查询学院
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        StringBuilder builder=new StringBuilder();
        String jsonStr="";

//        builder.append("<tr>");
//        builder.append("<td>1</td>");
//        builder.append("<td>张三</td>");
//        builder.append("<td>20</td>");
//        builder.append("<td>北京大兴区</td>");
//        builder.append("</tr>");
//        builder.append("<tr>");
//        builder.append("<td>2</td>");
//        builder.append("<td>李四</td>");
//        builder.append("<td>22</td>");
//        builder.append("<td>北京海淀区</td>");
//        builder.append("</tr>");
        //拼接一个JSON数组回去
        //builder.append("[");
        //用''单引号也不行 前端解析不了
//        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
//        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
//        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
//        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");
        //连接数据库校验用户名是否存在
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;

        //1.注册驱动
        //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            //2.获取连接
            conn= DriverManager.getConnection("xxx", "xxx", "xxx");
            //3.获取执行对象
            String sql="select id,name,age,addr from t_stu";
            ps = conn.prepareStatement(sql);
            //4.执行sql
            rs = ps.executeQuery();
            //5.处理结果集
            builder.append("[");
            while(rs.next()){//如果只有一条的情况
                String id = rs.getString("id");
                String name = rs.getString("name");
                String age = rs.getString("age");
                String addr = rs.getString("addr");
                //{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}

                builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");
            }
            //去掉最后一个{},后面的逗号
            jsonStr=builder.substring(0, builder.length()-1)+"]";

        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }


        writer.print(jsonStr);
    }
}

test

It’s too troublesome to splice JSON like this. Use fastjson to improve the program.

Introduce jar package

No need to bother with splicing

package com.web;

import com.alibaba.fastjson.JSON;
import com.pojo.Student;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * @author hrui
 * @date 2023/9/3 23:57
 */
@WebServlet("/studys")
public class AjaxRequestStudys extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //连接数据库,查询学院
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
//        StringBuilder builder=new StringBuilder();
//        String jsonStr="";

        List<Student> list=new ArrayList<>();

//        builder.append("<tr>");
//        builder.append("<td>1</td>");
//        builder.append("<td>张三</td>");
//        builder.append("<td>20</td>");
//        builder.append("<td>北京大兴区</td>");
//        builder.append("</tr>");
//        builder.append("<tr>");
//        builder.append("<td>2</td>");
//        builder.append("<td>李四</td>");
//        builder.append("<td>22</td>");
//        builder.append("<td>北京海淀区</td>");
//        builder.append("</tr>");
        //拼接一个JSON数组回去
        //builder.append("[");
        //用''单引号也不行 前端解析不了
//        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
//        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
//        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
//        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");
        //连接数据库校验用户名是否存在
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        String s="";
        //1.注册驱动
        //System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            //2.获取连接
            conn= DriverManager.getConnection("xxx", "xxx", "xxx");
            //3.获取执行对象
            String sql="select id,name,age,addr from t_stu";
            ps = conn.prepareStatement(sql);
            //4.执行sql
            rs = ps.executeQuery();
            //5.处理结果集
            //builder.append("[");
            while(rs.next()){//如果只有一条的情况
                String id = rs.getString("id");
                String name = rs.getString("name");
                String age = rs.getString("age");
                String addr = rs.getString("addr");
                //{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}

                //builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");

                Student stu=new Student(id,name,age,addr);
                list.add(stu);
            }
            //去掉最后一个{},后面的逗号
            //jsonStr=builder.substring(0, builder.length()-1)+"]";
            s = JSON.toJSONString(list);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }


        writer.print(s);
    }
}

test

Next, XML is used for data interaction (XML is large in size and is relatively rarely used now)

Backend code pay attention to Content-Type

@WebServlet("/xmlstudys")
public class AjaxRequestXML extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //注意响应类型是XML
        resp.setContentType("text/xml;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        StringBuilder xml=new StringBuilder();
        /*
        XML格式
        <Students>
             <Student>
                <id>1</id>
                <name>张三</name>
                <age>22</age>
                <addr>北京大兴区</addr>
             </Student>
             <Student>
                <id>2</id>
                <name>李四</name>
                <age>23</age>
                <addr>北京海淀区</addr>
             </Student>
        </Students>
         */
        xml.append("<Students>");
        xml.append("<Student>");
        xml.append("<id>1</id>");
        xml.append("<name>张三</name>");
        xml.append("<age>22</age>");
        xml.append("<addr>北京大兴区</addr>");
        xml.append("</Student>");
        xml.append("<Student>");
        xml.append("<id>2</id>");
        xml.append("<name>李四</name>");
        xml.append("<age>23</age>");
        xml.append("<addr>北京海淀区</addr>");
        xml.append("</Student>");
        xml.append("</Students>");
        writer.print(xml);
    }
}

front-end code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成数据交互</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("btn").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(this.readyState==4){
                    if(this.status==200){
                        //服务器响应XML字符串,如何接收
                        //使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)
                        var xmlDoc=this.responseXML;
                        console.log(xmlDoc)

                    }else{

                    }
                }
            }
            xhr.open("get","/ajax/xmlstudys",true)
            //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send()
        }
    }
</script>


<input type="button" value="显示学生列表" id="btn">

<table width="50%" border="1px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>住址</th>
    </tr>
    <tbody id="stubody">
    <!--        <tr>-->
    <!--            <td>1</td>-->
    <!--            <td>张三</td>-->
    <!--            <td>20</td>-->
    <!--            <td>北京大兴区</td>-->
    <!--        </tr>-->
    <!--        <tr>-->
    <!--            <td>2</td>-->
    <!--            <td>李四</td>-->
    <!--            <td>22</td>-->
    <!--            <td>北京海淀区</td>-->
    <!--        </tr>-->
    </tbody>
</table>
</body>
</html>

test

Specific front-end code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成数据交互</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("btn").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(this.readyState==4){
                    if(this.status==200){
                        //服务器响应XML字符串,如何接收
                        //使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)
                        var xmlDoc=this.responseXML;
                        console.log(xmlDoc)
                        //获取所有<student>元素,返回了多个对象,是个数组
                        var students=xmlDoc.getElementsByTagName("student")
                        console.log(students[0].nodeName)
                        var html=""
                        for(var i=0;i<students.length;i++){
                            var stu=students[i]
                            //获取<student>节点下所有子元素
                            var s=stu.childNodes;
                            html+="<tr>"
                            for(var j=0;j<s.length;j++){
                                var node=s[j]
                                if(node.nodeName=="id"){
                                    console.log("id="+node.textContent)
                                    html+="<td>"+node.textContent+"</td>"
                                }
                                if(node.nodeName=="name"){
                                    console.log("name="+node.textContent)
                                    html+="<td>"+node.textContent+"</td>"
                                }
                                if(node.nodeName=="age"){
                                    console.log("age="+node.textContent)
                                    html+="<td>"+node.textContent+"</td>"
                                }
                                if(node.nodeName=="addr"){
                                    console.log("addr="+node.textContent)
                                    html+="<td>"+node.textContent+"</td>"
                                }
                            }
                            html+="</tr>"
                        }

                        document.getElementById("stubody").innerHTML=html
                    }else{

                    }
                }
            }
            xhr.open("get","/ajax/xmlstudys",true)
            //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send()
        }
    }
</script>


<input type="button" value="显示学生列表" id="btn">

<table width="50%" border="1px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>住址</th>
    </tr>
    <tbody id="stubody">
    <!--        <tr>-->
    <!--            <td>1</td>-->
    <!--            <td>张三</td>-->
    <!--            <td>20</td>-->
    <!--            <td>北京大兴区</td>-->
    <!--        </tr>-->
    <!--        <tr>-->
    <!--            <td>2</td>-->
    <!--            <td>李四</td>-->
    <!--            <td>22</td>-->
    <!--            <td>北京海淀区</td>-->
    <!--        </tr>-->
    </tbody>
</table>
</body>
</html>