• JavaWeb简单实例——jQuery

    简单介绍：

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

    什么是jQuery？

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

    文件下载：

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <p>
    10.  
    11. p>
    12.  
    13. body>
    14. html>

     

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

    简单应用：

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

    id选择器：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <p id="main">这是一个p标签，id为mainp>
    10. <script>
    12.     const main = $('#main');
    13.     //将其输入在浏览器的控制台
    14.     console.log(main)
    15. script>
    16. body>
    17. html>

     输出显示：

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

    $ === jQuery

    类选择器：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <p class="main">这是一个p标签，id为mainp>
    10. <script>
    12.     //类选择器就是将井号变成句号
    13.     const main = $('.main');
    14.     //将其输入在浏览器的控制台
    15.     console.log(main)
    16. script>
    17. body>
    18. html>

     输出效果：

    绑定事件：

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <button id="main">点击按钮，在控制台输出被点击了button>
    10. <script>
    12. $('#main').click(()=>{
    13.     //向控制台输出一句话
    14.     console.log('被点了一下')
    15. })
    16. script>
    17. body>
    18. html>

     

    向元素添加内容：

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <button id="main">点击按钮，在控制台输出被点击了button>
    10. <p class="p1">这是原始的内容p>
    11. <script>
    13. $('#main').click(()=>{
    14.     //在点击按钮之后，就会将原本的内容替换成html方法里面的参数
    15.     $('.p1').html('点击之后就会将原本的内容修改成现在这样')
    16. })
    17. script>
    18. body>
    19. html>

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

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

    运行效果：

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

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

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

    代码实现：

    HTML：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <button id="main">点击按钮，在控制台输出被点击了button>
    10. <p class="p1">这里马上就会出现一个表格p>
    11. <script>
    12.     $('#main').click(() => {
    13.         $('.p1').load('http://localhost/ajaxServer',{username:'张三',passwd:'123456'})
    14.     })
    15. script>
    16. body>
    17. html>

    Servlet：

    1. package Semester_3.src.AJAX;
    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. @WebServlet(name = "ajaxServer" , value = "/ajaxServer")
    10. public class ajaxServer extends HttpServlet {
    11.     @Override
    12.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    13.         String username = req.getParameter("username");
    14.         String passwd = req.getParameter("passwd");
    15.         resp.getWriter().write(username);
    16.         resp.getWriter().write(passwd);
    17.         System.out.println("用户名为："+username);
    18.         System.out.println("密码为："+passwd);
    19.     }
    20.  
    21.     @Override
    22.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    23.         this.doGet(req, resp);
    24.     }
    25. }

    运行效果：

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

    代码实现：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用jQuery封装后的Ajaxtitle>
    6.     <script src="jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <button id="main">点击按钮，在控制台输出被点击了button>
    10. <p class="p1">这里马上就会出现一个表格p>
    11. <script>
    12.     $('#main').click(() => {
    13.         $('.p1').load('http://localhost/ajaxServer',{username:'张三',passwd:'123456'},(data,state,XMLRequest)=>{
    14.             console.log(data)
    15.             console.log(state)
    16.             console.log(XMLRequest)
    17.         })
    18.     })
    19. script>
    20. body>
    21. html>

    运行效果：

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

    jQuery的get请求方式：

    发起请求的jsp页面：

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: 33680
    4.   Date: 2022/11/29
    5.   Time: 8:03
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10. <head>
    11.     <title>jQuery的get请求方式title>
    12.     <script src="jquery-3.6.1.js">script>
    13. head>
    14. <body>
    15. <button type="button">加载数据button>
    16. <div class="data">div>
    17. <script>
    18.     $('button').click(()=>{
    19.         $.get('http://localhost:8080/AjaxServlet',{username:'张三',password:'123456'},(data)=>{
    20.             $('.data').html(data)
    21.         })
    22.     })
    23. script>
    24. body>
    25. html>

    响应数据的Servlet类：

    1. package Semester_3.src.ajax;
    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. @WebServlet(name="AjaxServlet" , value = "/AjaxServlet")
    10. public class AjaxServlet extends HttpServlet {
    11.     @Override
    12.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    13.         String username = req.getParameter("username");
    14.         String password = req.getParameter("password");
    15.         resp.setContentType("text/html;charset=utf-8");
    16.         resp.getWriter().write("注册成功！");
    17.         resp.getWriter().write("
      "      );
    18.         resp.getWriter().write("用户名："+username);
    19.         resp.getWriter().write("
      "      );
    20.         resp.getWriter().write("密码："+password);
    21.     }
    22.  
    23.     @Override
    24.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    25.         this.doGet(req, resp);
    26.     }
    27. }
  • 相关阅读:
    多项式特征生成--PolynomialFeatures类
    英语写作中“建立”、“构造”build、construct、establish、set up的用法
    C&C++内存管理
    力扣(LeetCode)128. 最长连续序列(C++)
    论文总结-交通预测(未完成)
    CSS3 动画
    2022年6月总结
    v-model和.sync区别
    无线充，大功率小家电，智能家居，无人机快速充电等产品供电 LDR6328S芯片TYUPE-C PD诱骗电压 USB-C解决PD电源取电问题
    Android14 WMS-窗口添加流程(一)-Client端
  • 原文地址：https://blog.csdn.net/hssjsh/article/details/128085032