JavaWeb简单实例——jQuery

Error_exception_worn

于 2022-11-29 08:46:28 发布

阅读量274

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/hssjsh/article/details/128085032

版权

简单介绍：

在之后的学习中，我们会接触到Ajax异步请求，这个异步请求需要我们在网页端使用JS来发送，而使用原生的Ajax请求比较复杂，所以我们就借用一个前端框架封装后的Ajax请求，这样可以简化我们的代码编写量，而这个前端框架就是jQuery。

什么是jQuery？

jQuery是一款跨浏览器开源的JavaScript库，他的核心理念是“写的更少，做得更多”，通过将原生的JS事件进行封装，可以简化我们的代码量，提升我们的代码开发效率。

文件下载：

jQuery的依赖文件是一个js文件，所以我们首先需要下载，然后在HTML页面中进行引入之后才可以进行使用。

https://code.jquery.com/jquery-3.6.1.js

下载好之后，我们需要创建一个HTML文件，然后在页面中引入这个文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<p>

</p>

</body>
</html>

放置发生路径错误，在前期测试和学习阶段，我们就把JS文件和HTML文件放在同一文件夹下，方便我们引用和寻找路径。

简单应用：

jQuery的学习属于前端的部分，这里我们只需要知道基本的选择器，load方法，插入数据的方法就可以了。

id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<p id="main">这是一个p标签，id为main</p>
<script>
<!--    选择ip为main的元素-->
    const main = $('#main');
    //将其输入在浏览器的控制台
    console.log(main)
</script>
</body>
</html>

输出显示：

这里需要说一下，jQuery在引入之后，可以使用一个$代替jQuery对象调用方法，也就是说：

$ === jQuery

类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<p class="main">这是一个p标签，id为main</p>
<script>
<!--    选择class为main的元素-->
    //类选择器就是将井号变成句号
    const main = $('.main');
    //将其输入在浏览器的控制台
    console.log(main)
</script>
</body>
</html>

输出效果：

绑定事件：

我们使用点击事件进行演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button id="main">点击按钮，在控制台输出被点击了</button>
<script>
<!--    就是在选择器后面跟上事件的名字，然后参数就是回调函数，就是当事件被触发之后要做的事情-->
$('#main').click(()=>{
    //向控制台输出一句话
    console.log('被点了一下')
})
</script>
</body>
</html>

向元素添加内容：

使用.html()方法向元素中添加内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button id="main">点击按钮，在控制台输出被点击了</button>
<p class="p1">这是原始的内容</p>
<script>
<!--    就是在选择器后面跟上事件的名字，然后参数就是回调函数，就是当事件被触发之后要做的事情-->
$('#main').click(()=>{
    //在点击按钮之后，就会将原本的内容替换成html方法里面的参数
    $('.p1').html('点击之后就会将原本的内容修改成现在这样')
})
</script>
</body>
</html>

load()方法：load方法就是请求HTML并用来指定元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button id="main">点击按钮，在控制台输出被点击了</button>
<p class="p1">这里马上就会出现一个表格</p>
<script>
    $('#main').click(() => {
        //将原本的p1的地方替换成我们请求的网页内容
        $('.p1').load('Data.html')
    })
</script>
</body>
</html>

运行效果：

load方法除了url参数还可以有其他参数：

url	请求地址
data	向服务器发送的数据
callback	回调函数

其中请求地址我们已经说过了，当参数中还有data的时候，就是向服务器发送数据：

代码实现：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button id="main">点击按钮，在控制台输出被点击了</button>
<p class="p1">这里马上就会出现一个表格</p>
<script>
    $('#main').click(() => {
        $('.p1').load('http://localhost/ajaxServer',{username:'张三',passwd:'123456'})
    })
</script>
</body>
</html>

Servlet：

package Semester_3.src.AJAX;

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;
@WebServlet(name = "ajaxServer" , value = "/ajaxServer")
public class ajaxServer extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String passwd = req.getParameter("passwd");
        resp.getWriter().write(username);
        resp.getWriter().write(passwd);
        System.out.println("用户名为："+username);
        System.out.println("密码为："+passwd);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

运行效果：

load的第三个参数是回调函数，用来在数据请求完成之后的请求信息，其中有三个默认参数，分别代表响应数据，请求状态和XMLReuqery对象：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装后的Ajax</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button id="main">点击按钮，在控制台输出被点击了</button>
<p class="p1">这里马上就会出现一个表格</p>
<script>
    $('#main').click(() => {
        $('.p1').load('http://localhost/ajaxServer',{username:'张三',passwd:'123456'},(data,state,XMLRequest)=>{
            console.log(data)
            console.log(state)
            console.log(XMLRequest)
        })
    })
</script>
</body>
</html>

运行效果：

报错啦~，这是因为其中有一个跨域问题，当然我们现在不需要关心，我们并不常用这个load方法，而是使用其他的方法，在之后的章节中我们会进行解释。

jQuery的get请求方式：

发起请求的jsp页面：

<%--
  Created by IntelliJ IDEA.
  User: 33680
  Date: 2022/11/29
  Time: 8:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jQuery的get请求方式</title>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<button type="button">加载数据</button>
<div class="data"></div>
<script>
    $('button').click(()=>{
        $.get('http://localhost:8080/AjaxServlet',{username:'张三',password:'123456'},(data)=>{
            $('.data').html(data)
        })
    })
</script>
</body>
</html>

响应数据的Servlet类：

package Semester_3.src.ajax;

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;
@WebServlet(name="AjaxServlet" , value = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write("注册成功！");
        resp.getWriter().write("<br/>");
        resp.getWriter().write("用户名："+username);
        resp.getWriter().write("<br/>");
        resp.getWriter().write("密码："+password);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}