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数组
{
"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>