imooc个人笔记 jQuery、Ajax、json交互、同步异步

最新推荐文章于 2023-10-11 16:38:09 发布
最新推荐文章于 2023-10-11 16:38:09 发布
阅读量162 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41992953/article/details/88615475
版权

jQuery：是目前前端非常著名的JS库，用于简化页面开发的过程。

Ajax:是HTML中一种新的通讯方式，可以异步与服务器后台进行交互。

JavaScript库：第三方厂商开发出来的一个一个JS的函数库，作用是简化JavaScript的开发。
在这里插入图片描述
jQuery介绍：
在这里插入图片描述
jQuery下载于安装：
在这里插入图片描述
目录放置位置：
在这里插入图片描述
jQuery选择器实验室：
在这里插入图片描述在选择文本框内输入 标签,则页面中的所被选的标签进行高亮显示。如上图 超链接 即将被高亮处理。

结果：
在这里插入图片描述lab.html

在这里插入图片描述

    <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>

若想使用jquery则必须引入.js

<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		/*
			id选择器使用"#id值"进行选择
			css选择器使用".css类名"进行选择
			$(".myclass").addClass("highlight");
		*/
		
		document.getElementById("btnSelect").onclick = function(){
			var selector = document.getElementById("txtSelector").value;
			//jquery的选择器方法
			//选择器 
			$("*").removeClass("highlight");
			$(selector).addClass("highlight");
		}

在参数中传入按钮的id号 btnSelect；
onclick：单击事件属性
function(){}: 匿名函数

var selector=document.getElementById(“txtSelector”).value;
(取出id为txtSelector的文本框的内容存入 selecor变量中)

$("*").removeClass(“highlight”);
(选择当前页面所有的元素，如果其元素有名为highlight的这个高亮CSS类，则将其移除。)

$(“XXX”):表示jquery的选择器方法 XXX为选择器的表达式

$(selector).addClass(“highlight”);
(在selector的值(如P标签) 所指向的标签 增加名为highlight的CSS类，对所选的所有组件进行高亮显示。)

Web页面开发的两个要素：
在这里插入图片描述
jQuery选择器：
在这里插入图片描述
基本选择器：
在这里插入图片描述案例：
在这里插入图片描述层叠选择器：
在这里插入图片描述如 ul 、 li标签
后代选择器：是选择父节点下的所有符合要求的子节点
子选择器：只选中父节点的符合要求的直接子节点
兄弟选择器：只会选择符合要求的平级节点

案例：选择li标签下的所有a标签进行高亮显示
在这里插入图片描述 属性选择器：
在这里插入图片描述案例:
在这里插入图片描述
位置选择器：
在这里插入图片描述如selector:first：表示获取前面选择器所选择的第一个元素。
案例：
下图中有两个mycalss，选择.myclass:first 则只会选中第一个元素进行高亮显示。
在这里插入图片描述表单选择器：
在这里插入图片描述案例：
在这里插入图片描述操作元素属性：
在这里插入图片描述案例:
下图展示的功能为：
如果attr()只有一个参数的话，a标签下href属性包含 163的所有超链接就会被选中，然后将其属性值以字符串的形式返回给变量href_attr,并在后台打印出来。如果选择器选中的是多个元素的时候，会默认只返回选中的第一个元素。

如果attr(）有两个参数的话，其功能则为设置功能。如下图73行代码，将选中的href属性里的数值改成了 http://www.163.com。

在这里插入图片描述 操作元素CSS属性：
在这里插入图片描述案例：
在这里插入图片描述解说:
第71行代码：为将color属性改为red色。

第72行代码：为向CS中传入JSON对象，使得可以一次性可以设置多个属性和属性值。

第74行代码：为选中的元素动态添加新的CSS类，如果需要添加多个，只需在两个类名中间使用空格分开即可。

设置元素内容：
在这里插入图片描述案例：
在这里插入图片描述text()和html()较为相似，如果需要给纯文本添加如< b >标签之类的HTML标签的话，可以使用html()。

jQuery事件处理方法：
在这里插入图片描述click为事件的名称；function为事件所对应的处理代码。

jQuery常用事件：
在这里插入图片描述案例:
在这里插入图片描述在这里插入图片描述上图：将p标签下class的值为myclass的属性添加click鼠标点击事件，当鼠标点击被选择的标签时，标签背景颜色变成黄色。
在这里插入图片描述假如我想判断用户名的非法字符输入，如判断 输入了空格则将其变成红色。
在这里插入图片描述如上图，我将接收到的event事件对象输出到控制台
在这里插入图片描述我在被选择的元素中输入了 abcd以及空格。可以看见Console控制台里已经输出了上图信息

在这里插入图片描述点开Event查看里面的信息，可以看出第一个输入的a，其keyCode编码为97。
而点击最后一个Event可以看到 空格所对应的keyCode为32。
在这里插入图片描述则在jQuery中，通过选择器判断keyCode是否为32来完成对空格符号进行变红色字体的处理操作了。

Ajax
在这里插入图片描述假如在网页上，每次接收信息或者给别人发送信息的时候，每次都要刷新整个页面，那么这样子用户体验将会很差。Ajax可以在不刷新的网页的情况下，与后台信息进行交互，从而实现与页面局部刷新的功能。

Ajax的使用流程：
在这里插入图片描述创建XMLHttpRequest对象：
在这里插入图片描述不同的浏览器，创建该对象的代码都不一样，所以需要进行判断。?
在这里插入图片描述

index.html
在这里插入图片描述
ContentServlet.java
在这里插入图片描述发送Ajax请求：
在这里插入图片描述true为同步;flase为异步；

处理服务器响应：
在这里插入图片描述readyState值：
如下图，如果如下图，xmlhttp.onreadystatechange表示Ajax在发送过程中各个状态发生变化的时候就会触发这个事件。

触发后进行判断，如果readyState== 4表示接收到了文本信息且status==200表示服务器响应成功，然后通过responseText获取响应的文本，再对当前页面进行处理。
在这里插入图片描述案例：
在这里插入图片描述index.html
在这里插入图片描述运行结果：
点击加载时，弹出框显示服务器返回的数据，然后再将收到的信息填充到下面的空DIV框里。
在这里插入图片描述在这里插入图片描述
Ajax通过json实现前后台交互案例：

News.java

package com.imooc.ajax;

public class News {
	private String title;
	private String date;
	private String source;
	private String content;
	
	public News() {
		
	}
	
	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}
	
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	
}

NewsListServlet.java

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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 com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String type = request.getParameter("t");
		List list = new ArrayList();
		if(type == null || type.equals("tiobe")) {
			list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "..."));
			
		}
		//把list转为json格式字符串
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

news.html
在这里插入图片描述运行结果：
在这里插入图片描述关于同步和异步：
如下第一幅图为同步执行，同步则是指如xmlhttp.send在网络发送的过程中，代码处于阻塞状态，只有得到了返回的数据才会继续执行下面的代码。

如下第二幅图为异步执行，异步则代表在网络发送过程中，不进行代码的阻塞，继续往下执行。异步采用的数据处理机制则是通过onreadystatechange进行状态监控，通过判断有数据返回时才进行处理。
在这里插入图片描述

在这里插入图片描述jQuery对Ajax的支持：
在这里插入图片描述在这里插入图片描述案例：
NewsListServlet.java

package com.imooc.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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 com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		/*try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}*/
		String type = request.getParameter("t");
		List list = new ArrayList();
		if(type != null && type.equals("pypl")) {
			list.add(new News("PYPL:2018年5月份全球编程语言排行榜" , "2018-5-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年6月份全球编程语言排行榜" , "2018-6-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年7月份全球编程语言排行榜" , "2018-7-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年8月份全球编程语言排行榜" , "2018-8-1" , "PYPL" , "..."));
			
		}else if(type == null || type.equals("tiobe")) {
			list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "..."));
			list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "..."));
			
		}
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

jquery_news.html
在这里插入图片描述

运行结果：
在这里插入图片描述Ajax函数的较为全面的案例示范：
在这里插入图片描述通过Ajax实现二级联动菜单：

实现效果：
有待更新。。。

音殿
关注
ajax同步异步请求与JSON数据解析
小超人的专栏
01-05 9287
今天接到一个任务，将json文件中的数据读取出来，填到echars的环形图中。。。。 中间遇到了很多问题，整理一下 json文件： 使用ajax从json文件中读取数据
3.1 前端学习笔记之XML与HTML、JavaScript、jQuery、AJAX、JSON的区别
qq_43456781的博客
08-15 1676
文章目录一、XML与HTML前言简介XML与HTML的区别最重要的区别（自我认为）二、官网的英文解释：三、JavaScript四、jQuery五、Ajax六、JSON七、总结 一、XML与HTML 前言 为什么我会突然学XML呢？我在学习用JSP写Web后台的时候，常常会看到“等价的XML语句”、“符合XML标准”等字眼，并且在我新建的JSP项目中也发现有很多的.xml文件，我很想知道这些.xml文件的作用以及与JSP（或者说是与Java）的联系，就试着开始学习XML了。 简介 XML的全称为可扩展标记语言
Ajax全接触笔记
weixin_38168760的博客
03-28 110
~ 同步——客户端发起请求，服务端需要处理，响应，此时客户端完全等待，当服务器处理完毕，客户端重新载入页面，如果出现错误，再次发生请求，处理，等待... ~ 异步——填写表单时，页面当时就把数据发送到服务器（发送请求），服务器处理响应，把结果发给页面，过程中不不要重新加载页面，填写的错误会实时显示，不会有任何的等待 ~ XMLHttpRequest对象——可以用于后台和服务器...
使用jquery的ajax进行异步交互(json格式)
MPFLY的博客
05-04 1300
使用jquery的ajax进行异步交互(json格式)
JQuery、JSON、AJAX、XML、IO流、多线程、反射核心知识点详解
a2285786446的博客
10-11 1221
JQuery、JSON、AJAX、XML、IO流、多线程、反射随笔，查漏补缺用
【javaweb简单教程】12.jQuery的Ajax交互扩展和jQuery让渡$操作符
Tuerlechat，的博客
10-17 183
最最最最最后一章，jQuery的Ajax交互扩展和jQuery让渡$操作符和fastjson小知识
Ajax&Json笔记，axios
zhansan的博客
07-16 116
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。var person = {“name”: “张三”, age: 23, ‘gender’: true};var p = {“name”:“张三”,“age”:23,“gender”:“男”};Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。//data: “username=jack&age=23”,//请求参数。},//表示如果请求响应出现错误，会执行的回调函数。type:“POST” , //请求方式。
Ajax异步交互
小金的博客
10-31 499
学习目标： 掌握Ajax 学习内容： 1、 简介 2、 XMLHttpRequest 3、 Get和Post 4、 JSON 学习时间： 1、２０２１年１０月２６日 2、 ２０２１年１０月２８日 学习产出： 1、 技术笔记 １ 遍 2、登录界面１份 Ajax简介 Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML）, 使用Ajax我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验 Ajax其实质是利用浏览器提供的
JSON与AJAX的应用_个人笔记
yiqiu1959的博客
04-13 144
目录标题jsonAjax json 什么是JSON？ JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。 采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、
JSON_ajax笔记2
08-08
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，设计... 这些是JSON和AJAX的基本概念及使用方法，它们共同构成了Web应用程序中数据交互的重要组成部分，使得用户可以享受到更流畅、更动态的网页体验。
jQuery学习笔记之 Ajax操作篇（三） - 过程处理
10-25
在jQuery中，Ajax操作是网页异步数据交互的核心技术，允许开发者在不刷新整个页面的情况下与服务器进行数据交换。在本篇jQuery学习笔记中，我们将深入探讨如何在Ajax操作过程中进行处理，包括观察Ajax事件、错误处理...
一款面向 AIoT 场景的分布式多模数据库产品，支持在同一实例同时建立时序库和关系库并融合处理多模数据
10-31
KWDB 是一款面向 AIoT 场景的分布式多模数据库产品，支持在同一实例同时建立时序库和关系库并融合处理多模数据，具备千万级设备接入、百万级数据秒级写入、亿级数据秒级读取等时序数据高效处理能力，具有稳定安全、高可用、易运维等特点。
yolo算法-跌倒检测数据集-10787张图像带标签-检测到跌倒fall-detection-ca3o8.zip
10-31
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
重庆外语外事学院在四川2020-2024各专业最低录取分数及位次表.pdf
10-31
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
maple学习,本人对maple教程这本书的学习过程
最新发布
10-31
做4.3这一节的时候的maple文件,仅供参考
stm32的实时时钟使用代码
10-31
stm32的实时时钟使用代码
Ajax与jQuery详解：从MVC到异步交互
"Ajax和jQuery学习笔记，涵盖了原生Ajax用法、JSON解析、jQuery选择器、DOM操作和事件处理，适合学习和理解jQuery技术。同时，笔记还涉及到MVC架构的优缺点及其在Web开发中的应用。" 在Web开发中，Ajax和jQuery是两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值