1. Toy模板网首页
  2. > Toy博客

AJAX学习笔记3练习

7月前 作者：biubiubiu0706 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了AJAX学习笔记3练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1.验证用户名是否可用

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

新建表

AJAX学习笔记3练习,ajax,学习,笔记

AJAX学习笔记3练习,ajax,学习,笔记

前端页面

AJAX学习笔记3练习,ajax,学习,笔记

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

AJAX学习笔记3练习,ajax,学习,笔记AJAX学习笔记3练习,ajax,学习,笔记

后端代码

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();
        }
    }
}

AJAX学习笔记3练习,ajax,学习,笔记

还可以在input获得焦点时候对<span里面的数据清空

AJAX学习笔记3练习,ajax,学习,笔记

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

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

AJAX学习笔记3练习,ajax,学习,笔记AJAX学习笔记3练习,ajax,学习,笔记

测试

AJAX学习笔记3练习,ajax,学习,笔记

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

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

返回JSON数据

回顾JSON

AJAX学习笔记3练习,ajax,学习,笔记

也可以是这样

AJAX学习笔记3练习,ajax,学习,笔记

测试

AJAX学习笔记3练习,ajax,学习,笔记

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

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

AJAX学习笔记3练习,ajax,学习,笔记

测试

AJAX学习笔记3练习,ajax,学习,笔记

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

AJAX学习笔记3练习,ajax,学习,笔记

AJAX学习笔记3练习,ajax,学习,笔记AJAX学习笔记3练习,ajax,学习,笔记

下面去连接下数据库

AJAX学习笔记3练习,ajax,学习,笔记AJAX学习笔记3练习,ajax,学习,笔记

前端

AJAX学习笔记3练习,ajax,学习,笔记

后端

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);
    }
}

测试

AJAX学习笔记3练习,ajax,学习,笔记

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

引入jar包

AJAX学习笔记3练习,ajax,学习,笔记

不需要那么麻烦进行拼接

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);
    }
}

测试

AJAX学习笔记3练习,ajax,学习,笔记

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

后端代码   注意下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);
    }
}

前端代码

<!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>

测试

AJAX学习笔记3练习,ajax,学习,笔记

具体前端代码

<!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>

AJAX学习笔记3练习,ajax,学习,笔记文章来源地址https://www.toymoban.com/news/detail-701328.html

到了这里，关于AJAX学习笔记3练习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Ajax学习笔记第4天

    Ajax学习笔记第4天

    做决定之前仔细考虑，一旦作了决定就要勇往直前、坚持到底！ 【 1 模仿百度招聘 】 整个流程展示： 1.文件目录 2.页面效果展示及代码 data中的page1数据展示 2.1 主页 index.html :index里面代码部分解释 underscore.js :模板页面的相关代码 页面渲染 ：jQuery框架 第1部分代码 ：先获取

    2024年02月06日
    浏览(27)
  • AJAX学习笔记1发送Get请求

    AJAX学习笔记1发送Get请求

    传统请求有哪些方式,及缺点 传统请求有哪些? 1.直接在浏览器地址栏上输入URL. 2.点击超连接. a href=\\\"/上下文/请求地址\\\"超链接请求/a  ----相对路径 a href=\\\"http://www.baidu.com\\\"超链接请求/a  ----绝对路径 3.提交form表单 form action=\\\"/上下文/请求地址\\\" method=\\\"post\\\" 4.使用JS代码 window.open(\\\"u

    2024年02月10日
    浏览(41)
  • AJAX学习笔记5同步与异步理解

    AJAX学习笔记5同步与异步理解

    AJAX学习笔记4解决乱码问题_biubiubiu0706的博客-CSDN博客 示例 前端代码 后端两个 test1 test2 同步与异步的使用 当第一个按钮改成同步后    test1里面睡10秒

    2024年02月09日
    浏览(29)
  • AJAX学习笔记2发送Post请求

    AJAX学习笔记2发送Post请求

    AJAX学习笔记1发送Get请求_biubiubiu0706的博客-CSDN博客 继续 AJAX发送POST请求  无参数 测试 改回来   测试 AJAX POST请求   请求体中提交参数 测试 后端打断点 如何用AJAX模拟form表单post请求提交数据呢？ 设置请求头必须在open之后,send之前 请求头里的设置好比form表单的enctype

    2024年02月10日
    浏览(31)
  • AJAX学习笔记8 跨域问题及解决方案

    AJAX学习笔记8 跨域问题及解决方案

    AJAX学习笔记7 AJAX实现省市联动_biubiubiu0706的博客-CSDN博客 跨域:指一个域名的网页去请求另外一个域名资源.比如百度页面去请求京东页面资源. 同源与不同源三要素:协议,域名,端口 协议一致,域名一致,端口一致.才算是同源.其他一律不同源 新建项目 测试: 1.window.open(); window.lo

    2024年02月09日
    浏览(34)

  • Vue2学习笔记のVue中的ajax

    hello, 这篇文章是Vue2学习笔记的第四篇，也是第四章：Vue中的ajax。 vue脚手架配置代理 方法一 在vue.config.js中添加如下配置： 说明： 1 优点：配置简单，请求资源时直接发给前端（8080）即可。 2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 3.工作方式：若按照

    2024年02月11日
    浏览(31)
  • jquery发送ajax练习

    jquery发送ajax练习

    HBuilder X

    2024年02月12日
    浏览(33)

  • Ajax_02学习笔记（源码 + 图书管理业务 + 以及 个人信息修改功能）

    01_Bootstrap框架-控制弹框的使用 代码 通过自定义属性，控制弹框的显示和隐藏.自己能够控制属性，从而进行更改 02_通过js方式控制弹框 目标：使用JS控制弹框，显示和隐藏 创建弹框对象 调用弹框对象内置方法 .show() 显示 .hide() 隐藏 代码示例 关于这两种方式控制弹框的显示

    2024年02月14日
    浏览(37)
  • Vue的Ajax请求-axios、前后端分离练习

    Vue的Ajax请求-axios、前后端分离练习

    ​ Axios，是Web数据交互方式，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2] axios :不是vue的插件，可以在任何地方使用

    2024年02月11日
    浏览(37)
  • JavaWEB学习笔记（二）------HTTP、Servlet、会话、过滤器、监听器、Ajax、前端工程化

    JavaWEB学习笔记（二）------HTTP、Servlet、会话、过滤器、监听器、Ajax、前端工程化

    目录 HTTP HTTP1.1 请求和响应的报文格式 请求报文 响应报文 常见状态响应码 Servlet  静态资源和动态资源 ​编辑  Servlet简介  Servlet开发流程 导入和响应头问题 url-pattern不同写法 url-pattern工作方式 Servlet注解方式配置 Servlet生命周期  Servlet继承结构 Servlet接口 GenerisServlet类 Ht

    2024年01月21日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包