JQ笔记（jQuery + ajax + json）入门
2017-03-07 15:08
393 查看
一、 rest服务构架
开发模式：分布式开发,跨域，前端需要两门技术（jq+ajax，json数据格式
Rest服务：开发人员只需要提供提交或者获取数据的api即可（应用接口，网络地址）聚合api，百度api，腾讯api..
二、 rest服务开发
1、IED优化
2、简单的rest基于服务开发的图书借阅系统
2.1、创建工程
根据项目开发参与人员进行分组，针对每组创建模块，模块内的架构，由负责该模块开发人员自行设定。
2.2、分析业务
图书借阅：书籍借出与归还
（1） 划分模块：
1、 用户模块：张三
2、 书籍模块：李四
3、 借阅记录模块：王五
4、 管理员模块：那六
（2）理清业务（那些业务必须做，那些业务可以二期在开发）
1、用户模块：注册，登录，验证用户名是否存在，手机号注册，邮箱注册，修改个人资料，退出，修改密码，安全邮箱，密码找回
2、书籍模块：书籍的CRUD,借阅，归还，丢失，报废，上架，下架，入库
2.3、创建实体类
2.4、 根据业务创建业务接口：团队负责人（组长）
2.5、创建服务端口（api），并测试
2.6、创建页面访问（jq+ajax）
JQ：javascript的封装简化版，跨浏览器支持,提供页面动态效果
2.6.1 导入JQ:webcontent文件夹下
2.6.2 引入JQ
在html中 “/”表示站点根目录（不带项目名）
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
1. jq的节点操作
a) 节点：
i. 创建：$(“<节点标记></节点标记>”) $("<h1></h1>");在节点中间不能写节点$("<h1><p></p></h1>")
ii. 获取：
$(this)：指的是当前对象
$(“节点标示”)
1. $(“#节点id名”)
$("#main")
2. $(“.节点类名 ”)
$(".main")
3. $(“节点标记名”);
$("div")
b) text(“要显示的内容”),html(“要显示的内容”): 向节点赋值，t：文本，h：html代码
$("<h1></h1>").text("<p>haha</p>").appendTo($("#main"));
$("<h2></h2>").html("<p>haha</p>").appendTo($("#main"));
c) appendTo(节点对象)：将当前节点添加到指定节点上。
$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
d) 父节点.append(子节点):在父节点上添加子节点
var $h=$("<h1></h1>")
$h.text("hehe")
$("#main").append($h1);
2. 节点属性的操作
属性：在一个标签内除了标签名以外的，属性都是以：属性名=值 存在的
标签对象.attr(“属性名”,”属性值”)，如果只写属性名标示获取该属性值，如果都写标示给属性赋值
a) 我们除了可以给节点添加已知属性，还可以自定义属性
b) 创建：标签对象.attr(“属性名”,”属性值”)
c) 获取：标签对象.attr(“属性名”)
<script type="text/javascript">
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").append
bd5e
To($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}
</script>
3. 节点jq事件
Jq事件：指的是所有的html事件在jq中都以方法的形式存在，以匿名方法的形式使用（只用一次的方法我们通常都用匿名方法）。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="main" id="main" data="123">
<!-- <button onclick="a()" id="btn1">变成猫咪</button>-->
</div>
<div class="main">
</div>
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
/*
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}*/
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
$img.click(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
/*
if(no==1){
$img.attr("src","/book/images/2.jpg");
$img.attr("data","2");
}else{
$img.attr("src","/book/images/1.jpg");
$img.attr("data","1");
}
*/
})
</script>
</body>
</html>
4. setTimeout与setInterval
setTimeout：延时执行setTimeout(方法，时间)
setInterval：间隔执行setInterval (方法，时间)
5. jq+ajax
ajax:异步传输；
异步：在网页端在后台自动运行的程序，并不影响网页的正常使用
表单提交：如果return false表示阻止表单提交，这是表单将不在调用action后面的路径。
本章DEMO:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{border: solid 1px #000}
</style>
</head>
<body>
<div class="reg" id="main" data="123">
<!-- <button onclick="a()" id="btn1">变成猫咪</button>-->
注册
<form>
用户名：<input name="username"><br>
密码：<input name="pwd"><br>
昵称：<input name="nick"><br>
<button >注册</button>
</form>
</div>
<div class="login" style="display: none">
登录
<form>
用户名：<input name="username"><br>
密码：<input name="pwd"><br>
<button >登录</button>
</form>
<button onclick="log()">新用户注册</button>
</div>
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function log(){
$(".login").css("display","none");
$(".reg").css("display","block");
}
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
/*
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}*/
/*
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
$img.click(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
if(no==1){
$img.attr("src","/book/images/2.jpg");
$img.attr("data","2");
}else{
$img.attr("src","/book/images/1.jpg");
$img.attr("data","1");
}
})
*/
/*
$(function(){
$("<img></img>")
.attr("src","/book/images/1.jpg")
.attr("data",2)
.click(function(){
//alert(JSON.stringify(this))
var no=$(this).attr("data");
$(this).attr("src","/book/images/"+no+".jpg");
$(this).attr("data",no<3?++no:1);
})
.appendTo($("#main"))
})
*/
/*
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
setInterval(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
},5000)
*/
//网页加载后执行方法中的内容
$(function(){
$("form").submit(function(){
//$("input[name=username]")：获取属性名（name）属性值（username）
var a=$("input[name=username]").val();
var b=$("input[name=pwd]").val();
var c=$("input[name=nick]").val();
var sendData={
'usrename':a,
'pwd':b,
'nick':c
}
$.ajax({
url:'/book/user/reg',
data:sendData,
success:function(data){
//alert(data);
if(data=="ok"){
//location.href='main.jsp'
$(".login").css("display","block");
$(".reg").css("display","none");
}else{
alert("注册失败")
}
},
error:function(a,b,c){
alert(c);
}
})
return false;
})
});
</script>
</body>
</html>
开发模式：分布式开发,跨域，前端需要两门技术（jq+ajax，json数据格式
Rest服务：开发人员只需要提供提交或者获取数据的api即可（应用接口，网络地址）聚合api，百度api，腾讯api..
二、 rest服务开发
1、IED优化
2、简单的rest基于服务开发的图书借阅系统
2.1、创建工程
根据项目开发参与人员进行分组，针对每组创建模块，模块内的架构，由负责该模块开发人员自行设定。
2.2、分析业务
图书借阅：书籍借出与归还
（1） 划分模块：
1、 用户模块：张三
2、 书籍模块：李四
3、 借阅记录模块：王五
4、 管理员模块：那六
（2）理清业务（那些业务必须做，那些业务可以二期在开发）
1、用户模块：注册，登录，验证用户名是否存在，手机号注册，邮箱注册，修改个人资料，退出，修改密码，安全邮箱，密码找回
2、书籍模块：书籍的CRUD,借阅，归还，丢失，报废，上架，下架，入库
2.3、创建实体类
2.4、 根据业务创建业务接口：团队负责人（组长）
2.5、创建服务端口（api），并测试
2.6、创建页面访问（jq+ajax）
JQ：javascript的封装简化版，跨浏览器支持,提供页面动态效果
2.6.1 导入JQ:webcontent文件夹下
2.6.2 引入JQ
在html中 “/”表示站点根目录（不带项目名）
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
1. jq的节点操作
a) 节点：
i. 创建：$(“<节点标记></节点标记>”) $("<h1></h1>");在节点中间不能写节点$("<h1><p></p></h1>")
ii. 获取：
$(this)：指的是当前对象
$(“节点标示”)
1. $(“#节点id名”)
$("#main")
2. $(“.节点类名 ”)
$(".main")
3. $(“节点标记名”);
$("div")
b) text(“要显示的内容”),html(“要显示的内容”): 向节点赋值，t：文本，h：html代码
$("<h1></h1>").text("<p>haha</p>").appendTo($("#main"));
$("<h2></h2>").html("<p>haha</p>").appendTo($("#main"));
c) appendTo(节点对象)：将当前节点添加到指定节点上。
$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
d) 父节点.append(子节点):在父节点上添加子节点
var $h=$("<h1></h1>")
$h.text("hehe")
$("#main").append($h1);
2. 节点属性的操作
属性：在一个标签内除了标签名以外的，属性都是以：属性名=值 存在的
标签对象.attr(“属性名”,”属性值”)，如果只写属性名标示获取该属性值，如果都写标示给属性赋值
a) 我们除了可以给节点添加已知属性，还可以自定义属性
b) 创建：标签对象.attr(“属性名”,”属性值”)
c) 获取：标签对象.attr(“属性名”)
<script type="text/javascript">
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").append
bd5e
To($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}
</script>
3. 节点jq事件
Jq事件：指的是所有的html事件在jq中都以方法的形式存在，以匿名方法的形式使用（只用一次的方法我们通常都用匿名方法）。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="main" id="main" data="123">
<!-- <button onclick="a()" id="btn1">变成猫咪</button>-->
</div>
<div class="main">
</div>
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
/*
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}*/
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
$img.click(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
/*
if(no==1){
$img.attr("src","/book/images/2.jpg");
$img.attr("data","2");
}else{
$img.attr("src","/book/images/1.jpg");
$img.attr("data","1");
}
*/
})
</script>
</body>
</html>
4. setTimeout与setInterval
setTimeout：延时执行setTimeout(方法，时间)
setInterval：间隔执行setInterval (方法，时间)
5. jq+ajax
ajax:异步传输；
异步：在网页端在后台自动运行的程序，并不影响网页的正常使用
表单提交：如果return false表示阻止表单提交，这是表单将不在调用action后面的路径。
本章DEMO:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{border: solid 1px #000}
</style>
</head>
<body>
<div class="reg" id="main" data="123">
<!-- <button onclick="a()" id="btn1">变成猫咪</button>-->
注册
<form>
用户名：<input name="username"><br>
密码：<input name="pwd"><br>
昵称：<input name="nick"><br>
<button >注册</button>
</form>
</div>
<div class="login" style="display: none">
登录
<form>
用户名：<input name="username"><br>
密码：<input name="pwd"><br>
<button >登录</button>
</form>
<button onclick="log()">新用户注册</button>
</div>
<script type="text/javascript" src="/book/jq/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function log(){
$(".login").css("display","none");
$(".reg").css("display","block");
}
//$("<h1></h1>").text("<p>haha</p>").appendTo($(".main"));
//$("<h2></h2>").html("<p>haha</p>").appendTo($(".main"));
//var $h=$("<h1></h1>")
//$h.text("hehe")
//$("#main").append($h);
/*
var $img=$("<img></img>");
var $btn1=$("#btn1");
var i=0;
$img.attr("src","/book/images/1.jpg").appendTo($("#main"))
function a(){
if(i%2==0){
$img.attr("src","/book/images/2.jpg");
//$btn1.text("变成美女")
}else{
$img.attr("src","/book/images/1.jpg")
//$btn1.text("变成猫咪")
}
i++;
}*/
/*
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
$img.click(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
if(no==1){
$img.attr("src","/book/images/2.jpg");
$img.attr("data","2");
}else{
$img.attr("src","/book/images/1.jpg");
$img.attr("data","1");
}
})
*/
/*
$(function(){
$("<img></img>")
.attr("src","/book/images/1.jpg")
.attr("data",2)
.click(function(){
//alert(JSON.stringify(this))
var no=$(this).attr("data");
$(this).attr("src","/book/images/"+no+".jpg");
$(this).attr("data",no<3?++no:1);
})
.appendTo($("#main"))
})
*/
/*
var $img=$("<img></img>");
$img.attr("src","/book/images/1.jpg").attr("data",2).appendTo($("#main"))
setInterval(function(){
var no=$img.attr("data");
$img.attr("src","/book/images/"+no+".jpg");
$img.attr("data",no<3?++no:1);
},5000)
*/
//网页加载后执行方法中的内容
$(function(){
$("form").submit(function(){
//$("input[name=username]")：获取属性名（name）属性值（username）
var a=$("input[name=username]").val();
var b=$("input[name=pwd]").val();
var c=$("input[name=nick]").val();
var sendData={
'usrename':a,
'pwd':b,
'nick':c
}
$.ajax({
url:'/book/user/reg',
data:sendData,
success:function(data){
//alert(data);
if(data=="ok"){
//location.href='main.jsp'
$(".login").css("display","block");
$(".reg").css("display","none");
}else{
alert("注册失败")
}
},
error:function(a,b,c){
alert(c);
}
})
return false;
})
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net
- jquery + ajax + json入门实例
- 使用jQuery简化Ajax开发——Ajax开发入门[2][完]
- 基于jQuery的AJAX和JSON实现纯html数据模板
- jQuery入门(10)：Ajax(利用WebService调用用户控件生成HTML)
- jQuery/Ajax/PHP/Json 的一个综合例子
- 玩玩AJAX之使用ashx文件响应来自JQuery的JSON请求.
- 基于jQuery的AJAX和JSON实现纯html数据模板
- 开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏
- jQuery入门(6)：Ajax
- jquery $.ajax入门应用二
- AJAX JSON PROTOTYPE 入门教程
- [原创]开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏——jPagerBar-1.1.1
- 使用jQuery简化Ajax开发——Ajax开发入门(转载)
- jQuery入门[5]－AJAX
- jQuery入门(9)：Ajax(调用页面方法和WebService)
- jQuery - Ajax - 与PHP集成可以使用json_encode返回结果
- ASP.NET MVC + jQuery + Newtonsoft.Json 快樂的AJAX
- 结合jquery,json很好地利用ashx文件开发高性能ajax
- jQuery/Ajax/PHP/Json 的一个综合例子