- jqery页面加载完成后的写法
$(function () {
});
或者
$(document).ready(function () {
$.getJSON();
});
-
springmvc.xml中
<context:component-scan base-package="com.store"/>，可以不用写，自动扫 -
jsp乱码
<meta charset="UTF-8"> -
get请求从服务器获取请求，pot请求将数据提交到服务器
-
html页面转jsp页面
-
项目配置无缘无故出错
-
${pageContext.request.contextPath}获取webapp根目录 -
Ajax异步请求，前端JQuery框架已经对Ajax进行了封装。所以使用ajax的时候需要引用JQurey:
<script src="${pageContext.request.contextPath}/resources/bootstrap3/jquery-1.9.1.min.js"></script> -
alert("注册名必填!");不好看用layui的框 -
JQuery的元素取值和赋值
取输入框的值 元素.val()
给输入框赋值 元素.val(值)
除了输入框之外的元素取值和赋值
取值：元素.html;
赋值：元素.html(值); -
type=button不能提交数据，除非有js函数，type=submit就会提交表单数据
-
表单action,submmit,name
-
===
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="form-group">
<label class="col-md-2 control-label">性别：</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="sex" value="0" <c:if test="${user.sex==0}"> checked</c:if>>男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="1" <c:if test="${user.sex==1}"> checked</c:if>>女
</label>
</div>
</div>
//给修改按钮添加点击事件
$("#updateInfo").click(function () {
//获取表单数据 表单序列化 将数据封装成对象
//保证输入框的name的属性值与对象属性保持一致
var data = $("#update-form").serialize();
//发起ajax post 请求
var url = "/user/doUpdateUserInfo";//要不要问好无所谓
$.post(url,data,function (obj) {
},"jason");
});
- 表单上传
必要条件：
- method=“post”
- enctype=“multipart/form-data”
- type=“file”
<form action="/toUpload" method="post" enctype="multipart/form-data">
<h1>上传图片</h1>
<input type="file" name="fileData">
<br>
<input type="submit" value="上传">
</form>
- 上传图片
<div class="panel-body">
<!--上传头像表单开始-->
<form class="form-horizontal" id="file-upload" role="form">
<div class="form-group">
<label class="col-md-2 control-label">选择头像:</label>
<div class="col-md-8">
<img src="${pageContext.request.contextPath}/resources/images/index/user.jpg" width="70" />
<input id="fileUpload" type="file" name="file">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id="upload" class="btn btn-primary" value="上传" />
</div>
</div>
</form>
</div>
$("#upload").click(function () {
//数据来源哪里？表单，$("#file-upload")获取到的数组，$("#file-upload")[0]获取到对象
var data = new FormData($("#file-upload")[0]);
$.ajax({
url:"/user/upload",//url的双引号可要可不要
data:data,//传给服务端的数据
type:"post",
contentType:false,//提交给服务端的数据类型 要不要当成字符串来处理
processData:false,//要不要处理提交的数据
dataType:"json",
success:function (data) {
if(data.state==200){
layer.msg(data.msg);
//http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
$("#img").attr("src","http://localhost:8067/upload/"+data.path);
}else {
layer.msg(data.msg);
}
}
})
})
springmvc.xml:
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--设置上传最大尺寸为50MB-->
<property name="maxUploadSizePerFile" value="52428800"/>
<property name="defaultEncoding" value="UTF-8"/>
<property name="resolveLazily" value="true"/>
</bean>
- 持久层需要的参数，controller能提供什么参数，承上启下：业务层提供给持久层不能解决的来自于controller能提供参数，不足由session获取；至于返回值，返回到前端的页面需要什么，controller就需要返回什么，业务层就需要返回什么。
- 前端获取webapp下的任何资源：
${pageContext.request.contextPath}/webapp下的目录/....../目标资源或者绝对路径http://localhost:项目端口/}/webapp下的目录/....../目标资源，但无法访问WEB-INF下的任何资源，只因前端属于浏览器端（客户端），后端可以通过配置视图解析器以请求转发方式访问WEB-INF下的任何资源。
前端重定向发送请求到controller:
标签类型<a href="/user/toUploadPage">
ajax:window.location.href="/user/toIndex"或者location.href="/user/toIndex"
后端跳转重定向由某个到某个方法跳转到另一个方法，也就是不走视图解析器，返回"redirect:/user/toUserInfoPage"。
后端内部请求转发跳转到WEB-INF下的任何资源，配置视图解析器，return "index"; - cookie的使用：
其中${avartar}来自后端全局session的绑定，"${avartar}"加双引号是为了不让jquery将el表达式的$误认为是jquery定义的$。
1.设置cookie
//页面加载完成后
$(function () {
//将用户头像保存在cookie中
$.cookie("image","${avartar}",{expires:7});
})
或者
//页面加载完成后
$(function () {
//将用户头像保存在cookie中
$.cookie("image","${avartar}",7);
})
2.获取cookie
其中$("#img")是img标签的id
//页面加载完成后
$(function () {
var avartar = $.cookie("image");
//给image赋值
$("#img").attr("src","${pageContext.request.contextPath}/upload/"+avartar);
});
<img id="img" src="${pageContext.request.contextPath}/resources/images/index/user.jpg" width="70" />
$.ajax({
url:"/user/upload",//url的双引号可要可不要
data:data,//传给服务端的数据
type:"post",
contentType:false,//提交给服务端的数据类型 要不要当成字符串来处理
processData:false,//要不要处理提交的数据
dataType:"json",
success:function (data) {
if(data.state==200){
alert(data.msg);
layer.msg(data.msg);
//http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
$("#img").attr("src","http://localhost:8067/upload/"+data.path);
$.cookie("image",data.path,{expires:7});
}else {
alert(data.msg);
layer.msg(data.msg);
}
}
})
})
- 不同返回视图的方式不可混合使用,否则就无法跳转页面，出现空白，只生效较前的那个：
public ModelAndView addAddress(Address address, HttpSession session, ModelAndView modelAndView,HttpServletResponse response) throws IOException {
String username = (String)session.getAttribute("username");
if(username==null&&username.equals("")){
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.println("<script>alert('未登录，请先登录');</script>");
writer.close();
modelAndView.setViewName("redirect:/address/addAddress");
return modelAndView;
}
- cookie的使用：
processData:false,//要不要处理提交的数据
dataType:"json",
success:function (data) {
if(data.state==200){
alert(data.msg);
layer.msg(data.msg);
//http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
$("#img").attr("src","http://localhost:8067/upload/"+data.path);
//1.存key为image，值为data.path，有效期7天的cookie
$.cookie("image",data.path,{expires:7});
}else {
alert(data.msg);
layer.msg(data.msg);
}
}
})
})
//页面加载完成后
$(function () {
//2.获取存key为image的值
var avartar = $.cookie("image");
//给image赋值
$("#img").attr("src","${pageContext.request.contextPath}/upload/"+avartar);
});
- select选择器的赋值：
其中data.areaNameList中的areaNameList是返回的map（data）集合中的key，是一个ArrayList；
var dataList = data.areaNameList;
for (var i = 0; i < dataList.length; i++) {
//先创建好select里面的option元素
var option = document.createElement("option");
//转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
$(option).val(dataList[i]);
//给option的text赋值,这就是你点开下拉框能够看到的东西
$(option).text(dataList[i]);
//获取select 下拉框对象,并将option添加进select
$('#area').append(option);
}
<label class="col-md-2 control-label"><span style="color: red;">*</span>省/直辖市：</label>
<div class="col-md-3">
<select class="form-control" data-province="---- 选择省 ----" id="provinceSelect" name="province" onchange="loadCity()">
</select>
- select标签取值：
var parentName = $("#provinceSelect").val();这个不行就用var parentName = $("#provinceSelect").html();因为除了标签其他都用$("#provinceSelect").html();
完整案例：id="provinceSelect"、id="city"、id="area"都是为了获取选中的值， $("#city").empty();为清空select选择器的值， contentType:"application/x-www-form-urlencoded; charset=UTF-8",是为了解决ajax传到后台的值出现乱码。
<label class="col-md-2 control-label"><span style="color: red;">*</span>省/直辖市：</label>
<div class="col-md-3">
<select class="form-control" data-province="---- 选择省 ----" id="provinceSelect" name="province" onchange="loadCity()">
</select>
</div>
<label class="col-md-2 control-label"><span style="color: red;">*</span>城市：</label>
<div class="col-md-3">
<select class="form-control" data-city="---- 选择市 ----" id="city" name="city" onchange="loadArea()"></select>
</div>
</div>
<div class="form-group ">
<label class="col-md-2 control-label"><span style="color: red;">*</span>区县：</label>
<div class="col-md-3">
<select class="form-control" data-district="---- 选择区 ----" id="area" name="area"></select>
<script>
$(function () {
$.ajax({
url:"/district/findAllProvince",//url的双引号可要可不要
//data:data,//传给服务端的数据
type:"post",
contentType:false,//提交给服务端的数据类型 要不要当成字符串来处理
processData:false,//要不要处理提交的数据
dataType:"json",
success:function (data) {
if(data.state==200){
//alert(data.msg);
//alert(data.provinceNameList);
//layer.msg(data.msg);
var dataList = data.provinceNameList;
for (var i = 0; i < dataList.length; i++) {
//先创建好select里面的option元素
var option = document.createElement("option");
//转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
$(option).val(dataList[i]);
//给option的text赋值,这就是你点开下拉框能够看到的东西
$(option).text(dataList[i]);
//获取select 下拉框对象,并将option添加进select
$('#provinceSelect').append(option);
}
}else {
alert(data.msg);
layer.msg(data.msg);
}
}
})
});
function loadCity() {
//var vi = document.all['provinceSelect'].value;
$("#city").empty();
var parentName = $("#provinceSelect").val();
$.ajax({
url:"/district/findAllCityByProvince",
type:"post",//请求类型
data:"parentName="+parentName,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
dataType:"json",//服务端返回给浏览器的数据类型
success:function (data) {//执行成功的回调函数,次data非彼data，是服务器端返回的json的一个变量
if(data.state==200){
var dataList = data.cityNameList;
for (var i = 0; i < dataList.length; i++) {
//先创建好select里面的option元素
var option = document.createElement("option");
//转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
$(option).val(dataList[i]);
//给option的text赋值,这就是你点开下拉框能够看到的东西
$(option).text(dataList[i]);
//获取select 下拉框对象,并将option添加进select
$('#city').append(option);
}
}else {
}
}
});
}
function loadArea() {
$("#area").empty();
var parentName = $("#city").val();
alert(parentName);
$.ajax({
url:"/district/findAllAreaByCity",
type:"post",//请求类型
data:"parentName="+parentName,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
dataType:"json",//服务端返回给浏览器的数据类型
success:function (data) {//执行成功的回调函数,次data非彼data，是服务器端返回的json的一个变量
if(data.state==200){
var dataList = data.areaNameList;
for (var i = 0; i < dataList.length; i++) {
//先创建好select里面的option元素
var option = document.createElement("option");
//转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
$(option).val(dataList[i]);
//给option的text赋值,这就是你点开下拉框能够看到的东西
$(option).text(dataList[i]);
//获取select 下拉框对象,并将option添加进select
$('#area').append(option);
}
}else {
}
}
});
}
</script>
- 在引入jqery同时在js的情况下，获取session中的值为
"${key}"，记住要加双引号。 - 页面加载完就发送请求但不是不发ajax请求的弊端
返回该页面的时候又会发请求
$(function () {
window.location.href="";
})
var data = $("#address-form").serialize();表单序列化，用于ajax参数，与pojo类属性要一致。address-form是表单name;- html不支持el表达式，但它和jsp都支持ajax请求。
9222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
