JSON,AJAX,Maven入门基础

2024-12-02 10:38:15

一，JSON

–1，概述

JSON是一种轻量级的数据交换格式。

指定了浏览器和服务器之间数据传输的格式。

–2，测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JSON的语法</title>
		<!-- 在网页中嵌入JS代码 -->
		<script>
			var a = "'name' : '张三'" ; // 定义JSON的属性
			var b = ' "age" : "18" ' ; // 定义JSON的属性
			console.log(a);
			console.log(b);
			a =  " { 'name' : '张三' , 'age' : '18'  } ";// 定义JSON的对象
			console.log(a.length);//求长度
			console.log(a.concat(123)); //拼串
			// 定义JSON的数组  '[????]'
			a =  '[{ "name" : "张三" , "age" : "18"  },{ "name" : "李四" , "age" : "20"  }]'
			console.log(a);
			//json串 <-> js对象 --- 使用JSON工具类
			//1. 接受服务器的数据: JSON字符串转成JS对象: : : JSON.parse("json字符串")
			//js对象可以解析对象的各种 属性的值 或者 调用函数
			var jsa = JSON.parse(a);//数据本身被双引号包裹
			console.log(jsa);//把a从字符串变成了js对象
			console.log(jsa[0].age) ;//18
			console.log(jsa[1].name) ;//李四
			//2. 给服务器发送数据: 将JS对象转成JSON字符串: : : JSON.stringify(js对象)
			//json串可以对字符串拼接、长度、截取、替换.....
			var str = JSON.stringify(jsa);
			console.log(str);
			console.log(str.concat(123));//拼接
			console.log(str.length);//长度
			console.log(str.substring(3));//截取，从3下标开始截取完为止
			console.log(str.substring(3,6));//截取，从3下标开始到6为止，[3,6)
		</script>
	</head>
	<body>
	</body>
</html>

二，AJAX

–1，概述

是异步的技术，用来局部刷新网页。

好处是：在不刷新整个网页的前提下，局部更新数据

–2，语法

$.ajax({
	type:  , //请求的方式，get/post
	url:  , // 交给具体的哪个程序去处理
	contentType: , //请求时的数据的类型 text html jpg json
	data:  , //请求时要携带的参数
	dataType: , //服务器返回数据的类型 text html jpg json
	success: function(data){ //请求成功后自动调用的
	},
	error: function(data){ //请求失败后自动调用的
	}
})

–3，测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 ajax语法</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			$(function(){//文档就绪事件
				$.ajax({ //发起Ajax请求数据
					type: "get",
					url: "http://p.3.cn/prices/mgets",
					contentType: "application/json;charset=utf-8",
					data: {		//拼接的参数
						"skuIds": "J_100003717483"
					},
					dataType: "jsonp",
					success: function(data) {	//返回的结果
					//data就已经是js对象了，直接解析属性的值
					//[0]: {p: "-1.00", op: "2499.00", cbf: "0", id: "J_100003717483", m: "10000.00"}
						console.log(data);
						console.log(data[0].op);//解析价格属性
					},
					error: function(data) {
						alert(data);
					}
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

三，Maven

–1，概述

Maven是项目构建工具。核心是一个pom.xml维护管理jar包。

–2，核心组件

1，仓库：repository

中央仓库、远程仓库：就是一个国外的网址，全球的人都能访问，存了各种jar包。

镜像仓库：就是一个国内的网址，从中央仓库下载好的jar包。

本地仓库：就是你本地磁盘的一个位置D:\Java\maven\resp，用来存你已经下载好的jar包。

查找jar包的顺序：本地仓库 > 镜像仓库 > 中央仓库

2，依赖：

是指在pom.xml里通过dependency标签，定义jar包的坐标。

如果jar包之间需要互相依赖，maven会自动管理并下载…

3，坐标：

jar包之间的唯一标识。groupid是指jar包分组，artifactid是指jar包的项目id，version是指jar包的版本

4，常用命令：

clean：清空缓存，直接清空了target文件夹

install：安装，产生了一个jar文件

–3，使用步骤

1，下载并解压maven

2，修改maven提供的settings.xml文件( 本地仓库 / 镜像仓库 )

3，IDEA 集成 maven

4，IDEA 创建 maven项目

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！

Springboot与Maven多环境配置的解决方案

Profile用法我们在application.yml中为jdbc.username赋予一个值,这个值为一个变量 jdbc: username: ${jdbc.username} Maven中的profiles可以设置多个环境,当我们选择a环境后,<jdbc.username>内的值将替换上述配置文件中的变量 </profiles> <profile> <id>a</id> <properties> <jdbc.usernam
Springmvc处理ajax请求并返回json数据

①在springmvc方法上添加@ResponseBody注解,springmvc会将数据转换成json并返回: @ResponseBody //指定返回json数据,不跳转页面 @RequestMapping("/list") public List<User> list(User user){ System.out.println("获取到异步请求数据:"+user); //todo 根据条件做数据库查询,返回结果集合 ArrayList<Us
原生js实现ajax请求和JSONP跨域请求操作示例

本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle
Maven中的SnapShot版本和正式版本的区别

Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个属性构成的,分别是groupId.artifactId以及version.这三个属性可以唯一确定一个组件(Jar包或者War包). 其实在Nexus仓库中,一个仓库一般分为public(Release)仓和SNAPSHOT仓,前者存放正式版本,后者存放快照版本.如果在项目配置文件中(无论是build
SpringMVC通过Ajax处理Json数据的步骤详解

SpringMVC通过Ajax处理Json数据的实现一.前言: Ajax: 在不重新加载整个页面的前提下,对网页的部分进行刷新,例如点赞,发送短信验证码功能等等,都可以通过ajax进行实现,Ajax实现了网页的异步刷新想要实现的效果,点击按钮,前端显示后台发送过来的学生信息,本次我们使用jquery形式的Ajax来完成二.使用步骤 1.引入jar jar: jackson-annotation.jar jackson-core.jar jackson-datebind.jar 如果不使用M
JSON,AJAX,Maven入门基础

目录一,JSON –1,概述 –2,测试二,AJAX –1,概述 –2,语法 –3,测试三,Maven –1,概述 –2,核心组件 –3,使用步骤总结一,JSON –1,概述 JSON是一种轻量级的数据交换格式. 指定了浏览器和服务器之间数据传输的格式. –2,测试 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JSON的语法&l
SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化

目录 0x01 新建SpringBoot项目 1. 新建maven工程 2. 编写代码 3. 代码讲解 0x02 JSON与AJAX结合 1. 编写html界面 2. 编写访问界面方法 3. 代码讲解 0x03 意外惊喜 1. 是彩蛋啊 2. 是又一个彩蛋啊 0xFF 总结 0x01 新建SpringBoot项目 1. 新建maven工程 ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇) 2. 编写代码
xhEditor编辑器入门基础

1.1. 在线可视化HTML编辑器概述在Web程序应用中,最常见的一种行为是信息和言论的发布和交流.而在信息发布的同时,往往会有对信息发布的格式.类型和功能上的需求,比如:加粗.下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率.在这个需求的背景下,HTML在线编辑器就应运而生了. 顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一.在线HT
微信小程序开发入门基础教程

微信小程序开发入门基础教程本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow
AngularJs 60分钟入门基础教程

AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了
JavaScript入门基础

JavaScript基本语法 1.运算符运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运算符(+,-,*,/,++,--,%).比较运算符(>,<,<=,>=,==,===,!=,!==).逻辑运算符(||,&&,!).条件运算(?:).位移运算符(|,&,<<,>>,~,^)和字符串运算符(+). 可能很多人不知道&quo
ajax跨域(基础域名相同)表单提交的方法

本文实例讲述了ajax跨域(基础域名相同)表单提交的方法.分享给大家供大家参考.具体如下: 1.要在做ajax提交的页面中添加如下js语句: <script type="text/javascript"> document.domain="基础域名"; </script> 2.ajax表单提交表单时可以使用一个jquery的一个表单插件jquery.form.js 使用语法如下: //fromPost为要收集数据的form表单的id $(&q
typeScript入门基础介绍

目录一.安装 TS 二.Vscode 自动编译 ts 三.入门 TS 基础数据类型接口类 TS 的特点: 始于 javaScript 归于 javaScript . 强大的类型系统. 先进的 javaScript . 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上. typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门. 一.安装 TS 使用之前需要安装: npm install -g typescript 安装完
Maven入门教程之如何在idea中配置Maven

目录一.下载Maven 二.配置环境变量三.配置本地仓库四.配置镜像五.配置统一的JDK 六.创建Maven项目七.Maven项目变为Web项目总结一.下载Maven Maven官网:http://maven.apache.org/download.cgi 或者其他下载渠道建议在D盘或者其他盘新建目录(D:/maven)用于存放Maven 二.配置环境变量此电脑右键→属性→环境变量→添加环境变量→编辑系统变量中的path添加maven的bin路径,具体如下: 如果配置成功,打开
Oracle PL/SQL语言入门基础

正在看的ORACLE教程是:Oracle PL/SQL语言入门基础.PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE 服务器和其他工具中了,近几年中更多的开发人员和DBA开始使用PL/SQL,本文将讲述PL/SQL基础语法,结构和组件.以及如何设计并执行一个PL/SQL程序. PL/SQL的优点从版本6开始PL/SQL就被可靠的整合到ORACLE中了,一旦掌握PL/SQL的优点以及其独有的数据管理的便利性,那么你很难想象ORACLE缺了PL