jQuery框架

1.1、jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

1.2、jQuery引入方式 

  • 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用CDN引入 
    <head><%--src 指定本地jQuery的所在地址路径--%><script src="jquery-1.9.1.min.js"></script>
</head>
  • 使用远程CDN资源库在线引入，避免了文件下载（本教程所采用） 
<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

1.3、jQuery快速使用

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>$(function () {// 请将jQuery代码书写在这里 ...alert('Hello,World!');});
</script>
</body>
</html>

1.4、jQuery的常用操作

        1.4.1 选择器的使用
<div id="myId"></div><script>//获取id值为myId的元素对象$("#myId")
</script>
        1.4.2 元素对象的操作   (取值、赋值等)
<div id="myId">张三</div><script>//取值var html  =  $("#myId").html();//弹窗alert(html)//赋值$("#myId").html("hello")
</script>
        1.4.3 事件绑定
<button>say hello</button>
<script>$('button').click(function () {alert("hello")});
</script>
        1.4.4 链式编程
<ul><li>三国演义</li><li>水浒传</li><li>齐天大圣</li><li>红楼梦</li>
</ul>
<script>//多个方法链式调用,将ul中索引为2的li元素的内容设置为西游记$('ul').find('li').eq(2).html("西游记");
</script>
        1.4.5 jQuery中的load方法
<button id="btn">加载数据</button><div id="box"></div>
<script>$("#btn").click(function () {$("#box").load("http://localhost:8080/target.jsp")});
</script>
<body>
<h3>早发白帝城</h3>
<h6>唐 李白</h6><p>朝辞白帝彩云间,</p>
<p>千里江陵一日还。</p>
<p>两岸猿声啼不住,</p>
<p>轻舟已过万重山。</p>
</body>
        1.4.6 jQuery中的load方法 (post请求，携带数据)

        （向服务器发送数据）

load()方法在发送请求时，可以附带一些数据，附带的数据可以通过第2个参数传递。

<html>
<head><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body><button id="btn">加载数据</button>
<div id="box"></div>
<script>$('#btn').click(function() {// 访问路径 ，  携带的数据$('#box').load('http://localhost:8080/LoadServlet',{username: 'admin', password: 123});});
</script>
</body>
</html>

@WebServlet(name = "LoadServlet",urlPatterns = "/LoadServlet")
public class LoadServlet extends HttpServlet{public void doPost(HttpServletRequest request, HttpServletResponse  response) throws IOException {response.setContentType("text/html;charset=utf-8");//获取load2.jsp页面的username与password值String username=request.getParameter("username");String password=request.getParameter("password");response.getWriter().println("注册成功！<br/>用户名： "+username+"<br/>密码："+password);}}

测试结果截图如下：

 

        1.4.7 jQuery中的load方法（回调函数）

load()方法的第3个参数是回调函数，该函数在请求数据加载完成后执行。回调函数用于获取本次请求的相关信息，它有3个默认参数，分别表示响应数据、请求状态和XMLHttpRequest对象。
其中，请求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（解析错误）。

   增加第三个参数：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body><button id="btn">加载数据</button>
<div id="box"></div>
<script>$('#btn').click(function() {// 访问路径 ，  携带的数据$('#box').load('http://localhost:8080/LoadServlet',{username: 'admin', password: 123},function(responseData, status, xhr) {console.log(responseData);	// 输出请求的数据console.log(status);		// 输出请求状态console.log(xhr);           // 输出XMLHttpRequest对象});});
</script>
</body>
</html>

测试结果截图如下：（F12查看）

2.1 JSON数据格式 

JSON数组数据都存储在一对[]中，在[]中，每一组数据用一对{}括起来，多个组之间用“,”分隔。需要注意的是，如果value是String类型的话必须用双引号引起来，如果是value是number、object、boolean和数组的话可以不使用双引号。

格式如下：

[
{"书名":"《三国演义》","价格":109.9,"作者":"罗贯中"},
{"书名":"《西游记》","价格":109.9,"作者":"吴承恩"},
{"书名":"《水浒传》","价格":109.9,"作者":"施耐庵"},
{"书名":"《红楼梦》","价格":109.9,"作者":"曹雪芹"}
]

任务：按照以下流程实现讲集合转化为JSON格式。

 

Book类省略......

@WebServlet(name = "JSONServlet",urlPatterns = "/JSONServlet")
public class JSONServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//解决中文乱码resp.setContentType("text/html;charset=UTF-8");//初始化一个空集合ArrayList<Book> bookList = new ArrayList<>();//创建四本书对象Book book1 = new Book("《三国演义》", 109.9, "罗贯中");Book book2 = new Book("《西游记》", 109.9, "吴承恩");Book book3 = new Book("《水浒传》", 109.9, "施耐庵");Book book4 = new Book("《红楼梦》", 109.9, "曹雪芹");//将数据放入集合中bookList.add(book1);bookList.add(book2);bookList.add(book3);bookList.add(book4);//创建JSONArray对象JSONArray jsonArray = new JSONArray();for (Book book:bookList){JSONObject jsonObject = new JSONObject();jsonObject.put("书名",book.getName());jsonObject.put("价格",book.getPrice());jsonObject.put("作者",book.getAuther());jsonArray.add(jsonObject);}//浏览器页面输出resp.getWriter().println(jsonArray);}
}

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0"><tr><th>作者</th><th>书名</th><th>价格</th></tr>
</table>
<script type="text/javascript">$('#btn').click(function() {$.getJSON('http://localhost:8080/JSONServlet',function(data) {var html = '';for (var Book in data) {html += '<tr>';for (var key in data[Book]) {html += '<td>' + data[Book][key] + '</td>';}html += '</tr>';}$('#dataTable').append(html);});});
</script>
</body>
</html>

 测试结果截图如下：

3.1 Ajax的基础操作

在jQuery中，向服务器请求数据的方法有很多。其中，最基本的方法是$.ajax()， $.ajax()方法可以精确地控制Ajax请求。例如，在请求出错时执行某些操作，设置请求字符集和超时时间等。

3.1.1 Ajax基础代码

$.ajax()方法是jQuery中最底层的Ajax方法，前面讲解的$.get()方法、$.post()方法就是对$.ajax()方法进一步的封装，$.get()方法、$.post()方法的实际封装代码如下。

jQuery.each( [ "get", "post" ], function( i, method ) {jQuery[ method ] = function( url, data, callback, type ) {if ( jQuery.isFunction( data ) ) {type = type || callback;callback = data;data = undefined;}return jQuery.ajax({url: url, type: method, dataType: type, data: data, success: callback});};
});

3.1.2 Ajax语法

$.ajax()方法可以实现所有关于Ajax的操作，其语法格式如下。

$.ajax(options)		    // 语法格式1
$.ajax(url,options)	   // 语法格式2

3.1.3 $.ajax()方法常用参数

参数

描述

url

请求地址，默认是当前页面

data

发送至服务器的数据

xhr

用于创建XMLHttpRequest对象的函数

beforeSend(xhr)

发送请求前执行的函数

success(result,status,xhr)

请求成功时执行的函数

error(xhr,status,error)

请求失败时执行的函数

complete(xhr,status)

请求完成时执行的函数（请求成功或失败时都会调用，顺序在success和error函数之后）

callback

请求完成时执行的函数

dataType

预期的服务器响应的数据类型

type

请求方式（GET或POST）

cache

是否允许浏览器缓存被请求页面，默认为true

timeout

设置本地的请求超时时间（以毫秒计）

async

是否使用异步请求。默认为true

username

在HTTP访问认证请求中使用的用户名

password

在HTTP访问认证请求中使用的密码

          contentType

发送数据到服务器时所使用的内容类型。默认为“application/x-www-form-urlencoded”

         processData

是否将请求发送的数据转换为查询字符串。默认为true

             context

为所有Ajax相关的回调函数指定this值

    dataFilter(data,type）

用于处理 XMLHttpRequest 原始响应数据

          global是否为请求触发全局Ajax事件处理程序，默认为tru
         ifModified

是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false

         traditional

是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false

      scriptCharset

请求的字符集

未完待续。。。。。。

 

 

 

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/315784.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Spring】16 ApplicationContextAware 接口

【Spring】16 ApplicationContextAware 接口

文章目录 1. 简介2. 作用3. 使用3.1 创建并实现接口3.2 配置 Bean 信息3.3 创建启动类3.4 启动 4. 应用场景总结 Spring 框架提供了许多回调接口&#xff0c;用于在 Bean 的生命周期中执行特定的操作。ApplicationContextAware 接口是其中之一&#xff0c;它允许 Bean 获取对 A…
阅读更多...
机器学习之K-means聚类

机器学习之K-means聚类

概念 K-means是一种常用的机器学习算法，用于聚类分析。聚类是一种无监督学习方法，它试图将数据集中的样本划分为具有相似特征的组（簇）。K-means算法的目标是将数据集划分为K个簇，其中每个样本属于与其最近的簇中心。 以下是K-means算法的基本步骤： 选择簇的数量（K值）…
阅读更多...
ubuntu 20.04 自由切换 python 的版本

ubuntu 20.04 自由切换 python 的版本

问题描述 当前 ubuntu 20.04 默认安装了多个 python 的版本&#xff0c;执行 python 时&#xff0c;默认版本是 Python 2.7.18 zhangszzhangsz:~$ python Python 2.7.18 (default, Jul 1 2022, 12:27:04) [GCC 9.4.0] on linux2 Type "help", "copyright&quo…
阅读更多...
Spring Boot 3 集成 Jasypt详解

Spring Boot 3 集成 Jasypt详解

随着信息安全的日益受到重视&#xff0c;加密敏感数据在应用程序中变得越来越重要。Jasypt&#xff08;Java Simplified Encryption&#xff09;作为一个简化Java应用程序中数据加密的工具&#xff0c;为开发者提供了一种便捷而灵活的加密解决方案。本文将深入解析Jasypt的工作…
阅读更多...
【JavaEE进阶】 获取Cookie和Session

【JavaEE进阶】 获取Cookie和Session

文章目录 &#x1f340;Cookie简介&#x1f384;理解Session&#x1f333;Cookie 和 Session 的区别&#x1f332;获取Cookie&#x1f6a9;传统获取Cookie&#x1f6a9;简洁获取Cookie &#x1f334;获取Session&#x1f6a9;Session存储&#x1f6a9;Session读取&#x1f388;…
阅读更多...
MySQL线上慢SQL问题分析处理小记

MySQL线上慢SQL问题分析处理小记

相同数据量表结构&#xff0c;线上执行12s 本地执行0.1s过程分析 1. 慢SQL信息 SELECT t1.id,t2.idFROM t_platform_target_standard_target_index t1LEFT JOIN t_platform_target_standard t2 ON t1.target_number t2.target_numberWHERE t1.delete_flag 0 AND t2.user_num …
阅读更多...
socket实现视频通话-WebRTC

socket实现视频通话-WebRTC

最近喜欢研究视频流&#xff0c;所以思考了双向通信socket&#xff0c;接下来我们就一起来看看本地如何实现双向视频通讯的功能吧~ 客户端获取视频流 首先思考如何获取视频流呢&#xff1f; 其实跟录音的功能差不多&#xff0c;都是查询电脑上是否有媒体设备&#xff0c;如果…
阅读更多...
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换（C#代码，UI界面版）

工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换（C#代码，UI界面版）

工业相机如何实现实时和本地Raw图像和Bitmap图像的保存和相互转换&#xff08;C#代码&#xff0c;UI界面版&#xff09; 工业相机图像格式工业相机实现Raw图像和Bitmap图像的保存和转换的技术背景在相机SDK中获取图像转换图像的代码分析工业相机回调函数里保存Bitmap图像数据工…
阅读更多...
太阳系三体模拟器

太阳系三体模拟器

介绍 《三体》是刘慈欣创作的长篇科幻小说&#xff0c;文中提到的三体问题比较复杂和无解。 该项目代码就是利用 Python 来模拟三体的运行&#xff0c;此项目代码完全共享&#xff0c;欢迎下载。 我们可以自己通过调整天体的初始坐标、质量和矢量速度等等参数来自定义各种场景…
阅读更多...
解决Golang WriteHeader设置后，Content-Type失效的问题

解决Golang WriteHeader设置后，Content-Type失效的问题

场景 最近笔者在研究web框架过程中&#xff0c;发现了一个响应类型的问题&#xff0c;困扰许久&#xff0c;原因就是设置了响应状态码后&#xff0c;然后设置响应类型为application/json。在实际请求后&#xff0c;响应类型变成了text/plain; charsetutf-8格式。 问题解决&…
阅读更多...
RPA 培训前期准备指南——安装Uibot(RPA设计软件）

RPA 培训前期准备指南——安装Uibot(RPA设计软件）

目录 一、电脑环境要求 二、所需的软件 2.1 办公软件 Office 版本&#xff1a; 2.2 Chrome 谷歌浏览器&#xff1a; 2.3 钉钉软件&#xff1a;官网下载 2.4 UiBot Creator 机器人流程自动化软件及 Chrome 扩展 三、UiBot Creator 安装与注册说明 &#xff08;1&#xf…
阅读更多...
公网ip数字证书申请流程

公网ip数字证书申请流程

SSL数字证书是一种安全通信协议&#xff0c;它使用加密技术来保护在网络上传输的数据的机密性和完整性。当一个网站使用SSL数字证书时&#xff0c;它可以在浏览器和网站之间建立一条加密通道&#xff0c;确保用户在网站上输入的信息&#xff0c;如用户名、密码、信用卡信息等&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023