<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
}
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",//跳转的地址
async:true, //true时，为异步，false为同步
type:"POST",//提交的方式
data:{"name":"lucy","age":18},//提交的数据
success:function(data){//成功返回后执行的人函数
alert(data.name);
},
error:function(){//失败时执行的函数
alert("请求失败");
},
dataType:"json"//返回值的类型
});
}
</script>
</head>
<body>
<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
<br>
</body>
</html>总结：
写jq语句自然想要导入包，$.get()/$.post()/$.ajax({}) 每个单元用逗号隔开，最后都要加上一个分号作为结束符号 -->
<!--json数据格式注意 写好的Json数据可以通过ajax传到后台，后台通过request.getparperter获得json数据（如json是对象/数组/集合，）
后天也可以通过相关工具把数据转化成json格式的数据传出来
取出json里面的数据
键/数组【n】.键/对象.数组【n】.键 -->
<!-- placeholder="请输入用户名"
在前台写完json与ajax都不用包用到json工具的时候才需要导
-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" />
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.jsp">注册</a></li>
<li><a href="cart.jsp">购物车</a></li>
<li><a href="order_list.jsp">我的订单</a></li>
</ol>
</div>
</div>
<!-- 导航条 -->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group" style="position:relative">
<input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
<div id="showDiv" style="display:none; position:absolute;z-index:1000;background:#fff; width:179px;border:1px solid #ccc;">
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 完成异步搜索 -->
<script type="text/javascript">
function overFn(obj){
$(obj).css("background","#DBEAF9");
}
function outFn(obj){
$(obj).css("background","#fff");
}
function clickFn(obj){
$("#search").val($(obj).HTML());
$("#showDiv").css("display","none");
}
function searchWord(obj){
//1、获得输入框的输入的内容
var word = $(obj).val();
//2、根据输入框的内容去数据库中模糊查询---List<Product>
var content = "";
$.post(
"${pageContext.request.contextPath}/searchWord",
{"word":word},
function(data){
//3、将返回的商品的名称 现在showDiv中
//[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]
if(data.length>0){
for(var i=0;i<data.length;i++){
content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
}
$("#showDiv").html(content);
$("#showDiv").css("display","block");
}
},
"json"
);
}
</script>
</div>
</div>
</nav>
</div>总结：
click 是关键字所以不能把方法名取名为click $(变量名)、$("选择器取得名字")
$().css();给标签添加样式、 （"样式","样式值"） 通过jq改变标签的样式
$().HTML();给标签添加内容(内容可以写成字符串的样子传入) 改变或增加标签的内容 增加标签
$().val();获取标签的值（input）
$().事件(function(){});获取标签的值（input） 页面加载特殊（$(function()）
$(obj).html()获取标签的内容（盒子div中的文字）
//通过jq改变标签的样式，改变标签的内容。增加标签
content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)'οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
//这里的this表示该div（为什么不给div取一个名字然后直接通过ID获取这个div？）因为这个方法可以表示n个这样的方法，而且这里也只能这样做
如何通过 jquery 给HTML添加标签
- 定义一个字符串变量
- 把要HTML标签写成字符串的形式，原来的“”的地方变成‘’。遇到变量用“+变量+”表示
- $("#showDiv").html(content)把字符串变量放入到某个标签的HTML中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
body {
margin-top: 20px;
margin: 0 auto;
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
font {
color: #3164af;
font-size: 18px;
font-weight: normal;
padding: 0 10px;
}
</style>
<script type="text/javascript">
$(function(){
//为输入框绑定事件
$("#username").blur(function(){
//1、失去焦点获得输入框的内容
var usernameInput = $(this).val();
//2、去服务端校验该用户名是否存在---ajax
$.post(
"${pageContext.request.contextPath}/checkUsername",
{"username":usernameInput},
function(data){
var isExist = data.isExist;
//3、根据返回的isExist动态的显示信息
var usernameInfo = "";
if(isExist){
//该用户存在
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color","red");
}else{
usernameInfo = "该用户可以使用"
$("#usernameInfo").css("color","green");
}
$("#usernameInfo").html(usernameInfo);
},
"json"
);
});
});
//总结： //每个事件（）; 以;结束
//变量出现了问题是不会提示出错的 $("#username")如果没有写#就不会提示出错
</script>
</head>
<body>
<!-- 引入header.jsp -->
<jsp:include page="/header.jsp"></jsp:include>
<div class="container"
style="width: 100%; background: url('image/regist_bg.jpg');">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"
style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
<font>会员注册</font>USER REGISTER
<form class="form-horizontal" style="margin-top: 5px;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username"
placeholder="请输入用户名">
<span id="usernameInfo"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3"
placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirmpwd"
placeholder="请输入确认密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="usercaption" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="usercaption"
placeholder="请输入姓名">
</div>
</div>
<div class="form-group opt">
<label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio1" value="option1">
男
</label> <label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio2" value="option2">
女
</label>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-2 control-label">出生日期</label>
<div class="col-sm-6">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control">
</div>
<div class="col-sm-2">
<img src="./image/captcha.jhtml" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" width="100" value="注册" name="submit"
style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
</div>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
<!-- 引入footer.jsp -->
<jsp:include page="/footer.jsp"></jsp:include>
</body>
</html>
总结：
定义方法有两种：
第一种：在页面加载的时候 获取标签 通过标签.事件的方法进行加载
$(function(){
//为输入框绑定事件
$("#username").blur(function(){
2.一种是把事件写在HTML标签中
其实很多的功能不使用json 也可以 ，但是使用ajax最大的好处就是 异步访问 可以使加载事件更加的快
所以以后凡是事件中要向后台要数据都可以使用ajax技术来实
//这里的this表示该div（为什么不给div取一个名字然后直接通过ID获取这个div？）因为这个方法可以表示n个这样的方法，而且这里也只能这样做
如何通过 jquery 给HTML添加标签
- 定义一个字符串变量
- 把要HTML标签写成字符串的形式，原来的“”的地方变成‘’。遇到变量用“+变量+”表示
- $("#showDiv").html(content)把字符串变量放入到某个标签的HTML中
<!-- 总结：写jq语句自然想要导入包，$.get()/$.post()/$.ajax({}) 每个单元用逗号隔开，最后都要加上一个分号作为结束符号 -->
<!--json数据格式注意 写好的Json数据可以通过ajax传到后台，后台通过request.getparperter获得json数据（如json是对象/数组/集合，）
后天也可以通过相关工具把数据转化成json格式的数据传出来
取出json里面的数据
键/数组【n】.键/对象.数组【n】.键 -->
<!-- placeholder="请输入用户名"
在前台写完json与ajax都不用包用到json工具的时候才需要导
-->
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
