投稿
  1. 极客之音首页
  2. 技术随笔

JavaWeb简单实例——jQuery

飞熊 • • 技术随笔 • 阅读 307

梦想不抛弃苦心追求的人，只要不停止追求，你们会沐浴在梦想的光辉之中。再美好的梦想与目标，再完美的计划和方案，如果不能尽快在行动中落实，最终只能是纸上谈兵，空想一番。只要瞄准了大方向，坚持不懈地做下去，才能够扫除挡在梦想前面的障碍，实现美好的人生蓝图。JavaWeb简单实例——jQuery，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

简单介绍：

在之后的学习中，我们会接触到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>

 JavaWeb简单实例——jQuery

放置发生路径错误，在前期测试和学习阶段，我们就把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>

 输出显示：JavaWeb简单实例——jQuery

 这里需要说一下，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>

 输出效果：JavaWeb简单实例——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>
<button id="main">点击按钮，在控制台输出被点击了</button>
<script>
<!--    就是在选择器后面跟上事件的名字，然后参数就是回调函数，就是当事件被触发之后要做的事情-->
$('#main').click(()=>{
    //向控制台输出一句话
    console.log('被点了一下')
})
</script>
</body>
</html>

 JavaWeb简单实例——jQuery

向元素添加内容：

使用.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>

运行效果：

JavaWeb简单实例——jQuery

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

运行效果：

JavaWeb简单实例——jQuery

 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>

运行效果：

JavaWeb简单实例——jQuery

 报错啦~，这是因为其中有一个跨域问题，当然我们现在不需要关心，我们并不常用这个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);
    }
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153327.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！