Servlet学习(一)：jquary和json

这篇具有很好参考价值的文章主要介绍了Servlet学习(一)：jquary和json。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、jquary的学习和使用

1.什么是jquary

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。

2.jquary和原生js对比获取input框中的数据和div框中的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用户名: <input type="text" name="userName"  id="userName"/>
密码:   <input type="text" name="password"   id="password"/>
        <input type="button" onclick="getInput()" value="获取input框的值"/>
		<div style="border:5px solid red;width:100px;height:50px" id="div1">div1</div>
		<div style="border:5px solid red;width:100px;height:50px" id="div2">div2</div>
		<input type="button" onclick="getdiv()" value="获取div框的值"/>
<script>
function getInput(){
	var username = $("#userName").val();   //通过jquary来获取input框中的值
	var password = document.getElementById("password").value; //通过js来获取input框中的值
	console.log(username);
	console.log(password);
	//jquery给input框中赋值
	$("#userName").val("admin");
	//js给input框中赋值
	document.getElementById("password").value  ="123456";
}
function getdiv(){
	//通过jquary来获取div框中的值
	console.log($("#div1").html());
	//jquery给div框中赋值
	$("#div1").html("admin");
	
	//通过js来获取div框中的值
	console.log(document.getElementById('div2').innerHTML);
	//js给div框中赋值
	document.getElementById('div2').innerHTML='admin';
}
</script>
</body>
</html>

3.jquar和ajax

AJAX 是一种用于创建快速动态网页的技术。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。和from表单一样都可以传输数据。

①.使用from表单给servlet服务发送数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/ThirdServlet/resources/mystyle.css">
</head>
<body>
<form action="http://localhost:8080/ThirdServlet/LoginServlet" method="get">
         用户名: <input type="text" name="userName"  id="username"/>
         密码: <input type="text" name="password"   id="password"/>
   	    <input type="submit" value="Submit"  />
</form>

</body>
</html>

当我们使用from表单进行数据上传的时候，我们发现我们前端页面发生了跳转。但是我们的后端往往不太喜欢前端发送完数据后马上跳转，因为在某些时候后端需要给前端发送一些数据，对页面进行更改。

②.使用ajax表单给servlet服务发送数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/ThirdServlet/resources/mystyle.css">
</head>
<body>
       用户名: <input type="text" name="userName"  id="username"/>
         密码: <input type="text" name="password"   id="password"/>
   <input type="button" value="Submit"  onclick="get()"/>
<script>
function get(){
	var data = {
		"username":$("#username").val(),
		"password":$("#password").val()
	}
	$.ajax({
        url: "http://localhost:8080/ThirdServlet/LoginServlet",   // 地址
        data:data,
        success: function (value)
        {
        	$("#username").val("我是ajax");//在这里我们尝试将页面进行修改
        }
       
     });
}
</script>
</body>
</html>

这一次我们发现我们的数据不但能上传，而且不会改变页面的跳转。而且还能对页面进行修改，这正是我们想要的。

二、JSON的学习和使用

1.JSON 是存储和交换文本信息的语法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青城博雅</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
</p>
<script>
var JSONObject= {
	"name":"青城博雅",
	"url":"http://boyatop.cn/"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
</script>

</body>
</html>

2.JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号{}保存对象中括号[]保存数组，数组可以包含多个对象

json对象

{ "name":"青城博雅" , "url":"boyatop.cn" }

json数组文章来源地址https://www.toymoban.com/news/detail-835185.html

{
    	"sites": [
        	{ "name":"青城博雅" , "url":"boyatop.cn" }, 
        	{ "name":"google" , "url":"www.google.com" }, 
        	{ "name":"微博" , "url":"www.weibo.com" }
    	]
     }

3.值得获取

①.获取json对象的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青城博雅</title>
</head>
<body>
<script>
var JSONObject= {
	"name":"青城博雅",
	"url":"http://boyatop.cn/"
};
//获取name值
console.log(JSONObject.name);
//获取url的值
console.log(JSONObject.url);
</script>

</body>
</html>

②.获取json数组当中的的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青城博雅</title>
</head>
<body>
<script>
var JSONObject= {
    	"sites": [
        	{ "name":"青城博雅" , "url":"boyatop.cn" }, 
        	{ "name":"google" , "url":"www.google.com" }, 
        	{ "name":"微博" , "url":"www.weibo.com" }
    	]
}
//获取name值

for( var i= 0;i<JSONObject.sites.length;i++){
	console.log(JSONObject.sites[i].name);
}

</script>

</body>
</html>