Javascript

JSON、AJAX、Maven

本文主要是介绍JSON、AJAX、Maven，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一,jQuery练习
–1,代码




jquery练习

			<!-- 先引入jquery的文件 -->
			<script src="js/jquery-1.8.3.min.js"></script>
			
			<!-- 再用jQuery语法,选择器.事件 -->
			<script >
				//文档就绪
				$(function(){
					//点击p,隐藏div
					$("#p1").click(function(){
						$("#div1").hide();	//hide()隐藏 
					})
					//点击a2,获取a1的内容,再改内容
					$(".a2").click(function(){
						alert( $(".a1").text() );//获取指定元素的内容
						//设置指定元素的内容
						$(".a1").text("我变了...");
					})
					//点击a,隐藏p
					$("a").click(function(){
						$("#p1").hide();
					})
				});
			</script>
		</head>
		<body>
			<p id="p1">单击我弹1</p>
			<div id="div1">双击我弹2</div>
			<a href="#" class="a2">鼠标划走弹4</a>
			<a href="#" class="a1">鼠标进入弹3</a>
		</body>
	</html>

二,Json
–1,概述
是一种轻量级的技术,用来解决 浏览器和服务器之间的数据传输
格式简单,体量小
–2,语法
“k”:“v”
{“k”:“v”,“k”:“v”,“k”:“v”}
[{“k”:“v”,“k”:“v”,“k”:“v”} ,{“k”:“v”,“k”:“v”,“k”:“v”} ]
–3,练习




json语法




点我 

--4,转换工具
	使用js的内置对象JSON,进行 两种 json数据的转换
	把json字符串 转成 js对象  -- JSON.parse("json字符串")
	把js对象 转成 json字符串  -- JSON.stringify(js对象)
--5,测试
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>JSON对象的使用</title>
				<script src="js/jquery-1.8.3.min.js"></script>
				
				<!-- 嵌入js代码  -->
				<script>
					function d1(){
						//定义json字符串
						var text = ' { "name":"熊大" , "age":"20"  } ' ;
						
						//1,,,把串转成js对象 -- 使用js的内置对象JSON
						var jsobj = JSON.parse(text);
						
						//console输出
						console.log(text);//json字符串
						console.log(jsobj);//js对象 -- 方便的  获取对象身上的属性值.函数
						console.log(text.name);//undefined
						console.log(jsobj.age); //"熊大" 
						
						//2,,,把js对象 转成json串 -- 使用js的内置对象JSON
						var jsonstr = JSON.stringify(jsobj);
						console.log(jsonstr);//json字符串
						console.log(jsonstr.length);//获取 json字符串的长度
					}
				</script>
			</head>
			<body>
				<div id="d1" onclick="d1();">我是div1</div>
			</body>
		</html>

三,Ajax
–1,概述
ajax的Asynchronous Javascript And XML
好处:异步访问(加快响应速度,不必等待)
局部刷新(不必刷新整个网页,只是局部刷新)
–2,测试




测试 ajax

				<!-- 引用jQuery文件 -->
				<script src="js/jquery-1.8.3.min.js"></script>
				
		<!-- ajax的好处: 异步访问(加快响应速度,不必等待),局部刷新(不必刷新整个网页,只是局部刷新) -->
				<script>
					$(function(){//文档就绪事件
						/* 使用jQuery提供的Ajax技术,需要指定一些参数 */
						$.ajax({//发起ajax的请求--准备参数
		//访问https://p.3.cn/prices/mgets?skuIds=J_100003717483
							type: "POST" ,  //请求方式
							url: "https://p.3.cn/prices/mgets" ,    //请求地址
							contentType: "application/json;charset=utf-8",   //请求的数据的类型
							data:  //请求时带的参数
							{
								 "skuIds": "J_100003717483"
							},
							dataType: "jsonp" ,  //期望服务器返回来的数据的类型
		//返回数据:[{"p":"-1.00","op":"2499.00","cbf":"0","id":"J_100003717483","m":"10000.00"}]
							success: function(data){ //请求成功,会返回数据封装在data里
								// document.getElementById("d1").innerHTML=data[0].id; //js
								$("#d1").text(data[0].id); //jquery  
								document.getElementById("d2").innerHTML=data[0].op;
								document.getElementById("d3").innerHTML=data[0].p;
							},
							error: function(data){  //请求失败,给失败提示
								alert(" 请求错误! ");
							}
						})
					} );
				</script>
			</head>
			<body>
				<div id="d1"></div>
				<div id="d2"></div>
				<div id="d3"></div>

				<img src="images/1.jpg" />
				<img src="images/a.png" />
				
			</body>
		</html>

四,Maven
–1,概述
是项目构建的工具.
以前是需要手动管理jar包(下载/安装/编译)
–2,涉及的概念
中央仓库:就是一个国外的网址,存了大量的jar包
镜像仓库:国内的网址,人家从中央仓库下载了所有jar包(阿里/网易/华为…)
本地仓库:从镜像仓库down的jar包,存到本地的磁盘中(可以自己指定)
依赖:每个核心jar包形成一个依赖，maven底层进行它相关的jar的自动导入
坐标:jar包的真实路径(层层的文件夹)，groupId-artifactId-version
命令:maven提供了特殊的命令,但是很少用,被IDEA整合了
–3,maven的使用
–直接解压就能
–找到settings.xml,添加镜像仓库和本地仓库的配置:
–maven解压好的位置–conf–settings.xml–用记事本打开
–镜像仓库:在 标签里面,添加


ali
ali Maven
*
https://maven.aliyun.com/repository/public/

–本地仓库:修改settings.xml第54行配置:
D:\Java\maven\resp
–4,IDEA 里配置 maven
–File-Settings-maven-配置三处(解压位置/settings.xml/本地仓库)-ok
–5,IDEA创建 maven工程
–File-New-Project-选Maven-next-输入工程名/groupId-Finish
–配置maven管理工程
–File-Settings-maven-配置三处(解压位置/settings.xml/本地仓库)-ok
–双击打开pom.xml文件,不报错就行了.
如果报错,打开右侧的Maven视图-点击刷新就行了maven会再去下载jar包

扩展:
–熟练的配置maven,并创建maven项目
–安装NodeJS,参考笔记1.31
–maven:用来统一管理jar包
–步骤:
–创建maven工程
File-New-Project-选中Maven-next-起个名字(展开填GroupId–cn.tedu)-Finish
–在idea里配置maven
File-Settings-Build, Execution, Deployment-Build Tools-Maven-设置Maven Home Directory(浏览maven解压后的位置)-ok

这篇关于JSON、AJAX、Maven的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航