JavaWeb+在线图书商城+Ajax（异步的 JavaScript 和 XML）（超详细）

最新推荐文章于 2024-04-20 03:19:45 发布

程序员老茶

最新推荐文章于 2024-04-20 03:19:45 发布

阅读量481

点赞数

分类专栏： # JavaWeb JAVA 文章标签： ajax javascript xml tomcat java

本文链接：https://blog.csdn.net/qq_53431712/article/details/130389669

版权

JAVA 同时被 2 个专栏收录

98 篇文章 3 订阅

订阅专栏

JavaWeb

8 篇文章 2 订阅

订阅专栏

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：JavaWeb+在线图书商城+Ajax（异步的 JavaScript 和 XML）

续前章内容：在线图书商城

环境与设备

1.软件：IntelliJ IDEA 2022.3.2
2.环境：Windows 11 and JDK 11

内容：

Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

任何的浏览器都支持ajax。通过原生的js使用ajax极不方便，这里使用jquery封装后的ajax使用。

使用

1.在页面中引入jquery文件

<script src="jquery文件路径"></script>

2.给某个节点绑定事件后使用ajax提交数据

<script>
	$("#btn").click(()=>{
        $.ajax({
            //访问的地址
            url:'URL地址',
            //提交的数据，以键值对的形式提交，也可以提交单个数据
            data:{
                id:123,
                op:"xxx"
            },
            //提交方式
            type:"post",
            //访问成功后的回调函数
            succuss:(res)=>{//res为访问URL地址后的返回值
                
            },
            //访问失败后的回调函数
            error:(res)=>{}
        });
    });
</script>

public Customer findByPhoneAndPwd(String phone, String password) {
    String sql = "select * from customer where phone=? and password=?";
    conn = DBHelper.getConn();
    try {
        pst = conn.prepareStatement(sql);
        pst.setString(1, phone);
        pst.setString(2, password);
        rs = pst.executeQuery();
        while (rs.next()) {
            int id = rs.getInt(1);
            String nickName = rs.getString(4);
            String trueName = rs.getString(5);
            String address = rs.getString(6);
            return new Customer(id, phone, password, nickName, trueName, address);
        }
    } catch (SQLException e) {
        System.out.println("登录异常" + e);
    } finally {
        DBHelper.release(conn, pst, rs);
    }
    return null;
}

service

public Customer login(String phone, String password) {
    return customerDao.findByPhoneAndPwd(phone, password);
}

servlet

case "login":
    String phone = req.getParameter("phone");;
    String password = req.getParameter("password");
    Customer login = customerService.login(phone, password);
    if (login != null) {
        //登录成功后，创建购物车对象,保存到session中
        Cart cart = new Cart();
        session.setAttribute("cart", cart);
        //将登录的用户保存在session中
        session.setAttribute("customer", login);
        //跳转到查询首页数据的servlet
        //resp.sendRedirect("http://localhost:8080/book_shop/book?op=queryByPage&page=1&keyword=");
    } else {
        //错误时，给前端反馈的字符串
        resp.getWriter().print("error");
    }
break;

页面ajax部分

$("#sub").bind("click",()=>{
    $.ajax({
        url:"http://localhost:8080/book_shop/customer",//提交的路径
        data:{//提交的数据data:{k:v,k:v}   data:xxx
            op:"login",
            phone:$(".inp[name=phone]").val(),
            password:$(".inp[name=password]").val()
        },
        type:"post",//提交方式
        success:(res)=>{
            if(res=="error"){
                alert("用户名或密码错误")
            }else{
                location.href="http://localhost:8080/book_shop/book?op=queryByPage&page=1&keyword=";
            }
        }
    });
})

注册

dao

/*
     * 检测电话是否存在
     * */
public int phoneExists(String phone) {
    //查询该电话出现的次数
    String sql = "select count(id) from customer where phone=?";
    conn = DBHelper.getConn();
    try {
        pst = conn.prepareStatement(sql);
        pst.setString(1, phone);
        rs = pst.executeQuery();
        //返回查询到的结果
        if (rs.next()) {
            return rs.getInt(1);
        }
    } catch (SQLException e) {
        System.out.println("检测电话是否存在" + e);
    } finally {
        DBHelper.release(conn, pst, rs);
    }
    return 0;
}
/*
	真正添加
*/
public int insert(Customer customer) {
    String sql = "insert into customer values(null,?,?,?,?,?)";
    conn = DBHelper.getConn();
    try {
        pst = conn.prepareStatement(sql);
        pst.setString(1, customer.getPhone());
        pst.setString(2, customer.getPassword());
        pst.setString(3, customer.getNickName());
        pst.setString(4, customer.getTrueName());
        pst.setString(5, customer.getAddress());
        return pst.executeUpdate();
    } catch (SQLException e) {
        System.out.println("注册异常" + e);
    } finally {
        DBHelper.release(conn, pst, rs);
    }
    return 0;
}

service

/*
     * 注册业务流程
     * 根据电话查询是否存在，不存在则添加，存在返回false
     * */
public boolean register(String phone, String password) {
    //检测电话是否存在
    if (customerDao.phoneExists(phone) == 1) {
        return false;
    }
    //真实注册
    Customer customer = new Customer();
    customer.setPhone(phone);
    customer.setPassword(password);
    customer.setNickName("用户" + phone.substring(7));
    return customerDao.insert(customer) > 0;
}

servlet

case "register":
    //注册，注册的电话号码不能重复
    String regPhone = req.getParameter("phone");;
    String resPwd = req.getParameter("password");
    //调用注册
    if (customerService.register(regPhone, resPwd)) {
        resp.getWriter().print("注册成功");
    } else {
        resp.getWriter().print("该手机号码已注册");
    }
break;
    case "checkPhone":
    String checkPhone = req.getParameter("phone");
    resp.getWriter().print(customerService.phoneExists(checkPhone));
break;

页面js部分

<script>
    /*电话文本框内容改变事件*/
    $("input[name=phone]").change(function () {
        $.ajax({
            url: "http://localhost:8080/book_shop/customer",
            data: {
                op: "checkPhone",
                phone: $(this).val()
            },
            type: "post",
            success: (res) => {
                if (res == "true") {
                    //显示提示文字
                    $("#warning").show();
                    //禁用按钮，修改按钮文件
                    $("#sub").attr("disabled","true");
                    $("#sub").val("请重新输入手机号码");
                } else {
                    //隐藏提示文字，恢复按钮功能
                    $("#warning").hide();
                    $("#sub").removeAttr("disabled");
                    $("#sub").val("注册");
                }
            }
        });
    });
    /*表单提交事件*/
    document.forms[0].onsubmit = () => {
        var phone = document.querySelector(".inp[name=phone]").value;
        var password = document.querySelector(".inp[name=password]").value;
        //1开头的11位数字
        var regexPhone = /^1\d{10}$/;
        //非空格的至少6位密码
        var regexPwd = /^[^\s]{6,}$/;
        if (!regexPhone.test(phone)) {
            alert("电话格式有误");
            return false;
        }
        if (!regexPwd.test(password)) {
            alert("密码中不能出现空格且至少6位");
            return false;
        }
    }
</script>

退出

servlet

case "logout":
    //销毁session
    session.invalidate();
    //跳转登录页
    resp.sendRedirect("/book_shop/pages/login.html");
break;

总结

好好学习，天天向上。

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

程序员老茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb+在线图书商城+Ajax（异步的 JavaScript 和 XML）（超详细）

JavaWeb+在线图书商城+Ajax（异步的 JavaScript 和 XML）
复制链接

扫一扫

专栏目录