呕心沥血，拒绝水货，Jsp结和js做前端开发经验<一>
都是干货哦。1.以ModelAdnView传数据到jsp页面，如何使用数据。2. 页面导航后退功能3. js操作style样式方式，比如根据判断结果不一样，显示不一样4. 页面跳转参数传递5. 使用Vue.js，下载Vue.js库并引入 jsp页面里6. html里获取当前索引值7. 弹出框，引入bunndle.js8. 我想取索引值小于3的所以li9. 请求报
都是干货哦。
1.以ModelAdnView传数据到jsp页面，如何使用数据。
2. 页面导航后退功能
3. js操作style样式方式，比如根据判断结果不一样，显示不一样
4. 页面跳转参数传递
5. 使用Vue.js，下载Vue.js库并引入 jsp页面里
6. html里获取当前索引值
7. 弹出框，引入bunndle.js
8. 我想取索引值小于3的所以li
9. 请求报400 Bad Request
10. a里href相关设置。
11. Js数组
12. js读取服务器txt配置文件，使用ajax方式
13. jsp里el表达式拼接字符串
1.以ModelAdnView传数据到jsp页面，如何使用数据。
1.1简单数据，比如int,string,float等
比如:
ModelAndView mView = new ModelAndView();
mView.addObject("invoNum", 231.33);
mView.setViewName("/invoice/test");
携带一个invoNum参数，值为231.33
1.1.1 jsp标签里拿数据。${参数名}
<h2>${invoNum}元</h2>
1.1.2 js里拿数据。${参数名}
比如：var invoNum = ${invoNum};
如果参数值是字符串，则要加双引号
比如：var invoNum = “${invoNum}”;
1.2 复杂数据
复杂数据不能以上面方式取，因为js无法将自定义类型序列化，即使用$去取数据，也只会把类名返回，而不是里面具体数据，所以要想拿到复杂数据，2种方法
1.将数据序列化，这是最靠谱的方式。
比如使用gson，不懂gson的看 《Gson项目使用全解析》将复杂类型或集合或map转成json格式后，在js里取数据，比如如下数据：
modelAndView里保存序列化后的json数据。
Js代码:
var invoRecords= ${json};
注意取$符不能加双引号，实际结果：
成功的将数据取到js里，而且自动转成json数据格式，在js里可以用“.”操作符取,然后做些逻辑处理，处理完后再设置的标签上，当然方式除了使用jquery直接设置属性外，还可以用Vue，我推荐使用Vue绑定，后面会介绍Vue在实际项目上的使用。
2.明确指出路径到简单对象上，而且保存的是基本类型的，自定义类型只能使用上面介绍的json方式。
比如modelAndView里存储List,list里存的是tom,jetty字符类型，则使用${list[0]}取数据，而且必需明确是哪一条，${list[0]}明确取第一条，如果用变量代替是不行的，比如${list[i]},i可能为0,1,2…是取不出来的。
1.3 <%%>符号里能不能用$符取到数据呢，暂时，不能，未知
2.url?key=value&key=value…形势传递的数据
在标签或js里都可以用${param.参数名}取到数据。
3.标签里onclick直接写js代码而不调用方法：
比如：<a οnclick=" javascript:window.location.href='../test/jsp';"></a>
或者<a href=” javascript:window.location.href='../test/jsp'”/>
4.页面导航后退功能：
4.1后退不刷新
1. window.history.back();
2. window.history.go(-1);
比如：href="javascript:history.go(-1);"或οnclick="javascript:history.go(-1);"
4.2 后退并刷新
window.history.go(-1);
window.location.reload();
4.3 刷新本页
window.location.reload();
4.4 如果有完成弄些操作后再判断是否后退的功能，上面的方法是不能用的
window.location.href=document.referrer;( window.location.href ：可以取到上一个页面的具体路径)
比如：function(){
XXX逻辑判断
window.location.href=document.referrer;
}
4.5 后退2页
Window.history.go(-2)以此类推
5.js操作style样式方式，比如根据判断结果不一样，显示不一样
获取style里属性值display:$("#id").css("display");
设置style里属性：$("#id").css("display","none");
6.页面跳转参数传递
6.1 最直接的方法，打开url并跟key:value
window.location.href='${pageContext.request.contextPath}/page/invoice/invoiceInfoByMoney.jsp?title=' +
vue.title + "&amt=" + vue.amt + "&city=" + vue.city + "&name=" + vue.name + "&addr=" + vue.addr +
"&zip=" + vue.zip + "&mob=" + vue.mob + "&invoNum=" + ${param.invoNum };
6.2 使用jstl核心标签库c:url和c:param
jsp页面引用核心库：<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>
下面创建c:url
<c:url var="addInvoiceUrl" value="/bss/invo/addInvoice">
<c:param name="amt" value="${param.amt }"></c:param>
<c:param name="title" value="${param.title }"></c:param>
<c:param name="city" value="${param.city }"></c:param>
<c:param name="rcvr" value="${param.name }"></c:param>
<c:param name="rcvAddr" value="${param.addr }"></c:param>
<c:param name="rcvZip" value="${param.zip }"></c:param>
<c:param name="rcvMob" value="${param.mob }"></c:param>
</c:url>
下面使用c:url：
<h5><buttonclass="j-open"οnclick="location.href='${addInvoiceUrl}'">提交</button></h5>
6.3 使用sprigmvc，创建请求，然后在ModelAndView里设置页面和传递的参数
比如：
ModelAndView mView = new ModelAndView();
mView.addObject("json", json);
mView.setViewName("/test");
注意“/”表示应用的根目录
6.4 使用page,request,session或application传递参数,常用的是request和session。
在test1.jsp里：
request.setAttribute("name", "陈哥");
或 session.setAttribute("name", "陈哥");
在test2.jsp里取数据
<h1>${name}</h1>
能正确取到name值.
如果使用的是request.getRequestDispatcher("/test").forward(request,response);服务器跳转也可以用request传参数。
6.5 用form表单，这个也简单，只要在action里正确设置了jsp页面或请求路径，表单里参数会自动跟上，如果页面不是用表单展示的也可以模拟表单请求，但我觉得使用的地方好。其它方法完全可以代替，下面给出例子：
function post(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
比如调用方法是：
post("/test",{name:”陈袁”});
在requestMapping里处理请求：
@RequestMapping(value = "invoiceRecord", method = RequestMethod.POST)
public String test(){
String content = request.getParameter("name");
request.setAttribute("name",name);
return "test2.jsp";
}
test2.jsp:
<h2>${name}</h2>或者没有中间层处理，action直接指向test2.jsp也可以。
7.使用Vue.js，下载Vue.js库并引入 jsp页面里。
一般我常把vue实例定义在html页面里，因为Vue必需绑定到标签上，否则会报错。
var amt = ${param.amt};
var title = "${param.title}";
var city = "${param.city}";
var vue = new Vue({
el:"#invoiceAddr",
data:{
namePlaceholder:"请输入收件人姓名",
name:"",
addrPlaceholder:"请输入邮寄地址",
addr:"",
zipPlaceholder:"请输入邮编",
zip:"",
mobPlaceholder:"请输入有效的手机号码",
mob:"",
amt:amt,
title:title,
city:city
}
})
使用${参数名}方式取到数据绑定到Vue上，其中el后面绑定的标签必需是id值，且不能绑定到body上，一般id取需要绑定数据标签上的上一层或上上层，一般会不绑定本层。比如：
<div class="m-middle" id="invoiceAddr">
<ul>
<li><i>name：</i><input type="text" :placeholder="namePlaceholder" v-model="name"></li>
</ul>
</div>
而不是
<div class="m-middle">
<ul>
<li><i>name：</i><input type="text" id="invoiceAddr" :placeholder="namePlaceholder" v-model="name"></li>
</ul>
</div>
用vue有个好处，数据是双向绑定的，这样拿用户输入的数据很方便直接用Vue实例取。
比如上面的：vue.city。
8.html里获取当前索引值 ：从0开始
比如：
<div class="m-item" v-for="item initems">
<divclass="m-left">
<p>好</p>
</div>
<divclass="m-right m-right3">
<ul>
<li><ahref="#"id="testB":name="item.cd" onclick="openPayforNow(this)">测试</a></li>
</ul>
</div>
</div>
<div class="m-item" v-for="item initems">
<divclass="m-left">
<p>好</p>
</div>
<divclass="m-right m-right3">
<ul>
<li><ahref="#"id="testB":name="item.cd" onclick="openPayforNow(this)">测试</a></li>
</ul>
</div>
</div>
或者看截图：
在点测试按钮时，我需要知道当前索引是多少：
openPayForNow方法如下：
//打开立即支付页面
functionopenPayforNow(thisObject) {
var index = $('.m-item').index($(thisObject).parents('.m-item'));
console.log(index);
}能正确得到当前索引值。
9.弹出框，引入bunndle.js
代码：
function template(){
return '<div class="m-window m-window3 m-popup-border">'+
'<span class="j-close"></span>'+
'<div class="m-popup">'+
'<h2>温馨提示</h2>'+
'<ul style="display:inline-block;">'+
'<li >开票金额不足'+'</li>'+
'</ul>'+
'<div class="m-money-button j-close">'+
'<a id="recharge">我知道了</a>'+
'</div>'+
'</div>'+
'</div>'
};
function layerOpen(){
layer.open({
type: 1,
className: '',
content: template(),
success:function(){
$('.j-close').click(function(){
layer.closeAll()
});
}
});
};
10.html里取小于某个索引或大于个个索引值的全部标签
如下html：
<div class="m-bottom">
<h2>流程跟踪</h2>
<ul>
<li><div>物流</div><span></span><em></em></li>
<li><div>分拣</div><span></span><em></em></li>
<li><div>洗涤</div><span></span><em></em></li>
<li><div>烘干</div><span></span><em></em></li>
<li><div>消毒</div><span></span><em></em></li>
<li><div>熨烫</div><span></span><em></em></li>
<li><div>出库</div><em></em></li>
<li><div>物流</div><em></em></li>
</ul>
</div>
我想取索引值小于3的所以li，怎么取的，代码如下：
function changeActive(index){
$(".m-bottom ul em:lt(" + index + ")").addClass('f-active');
$(".m-bottom ul em:gt(" + index + ")").removeClass('f-active');
}
使用jquery里的”lt”,”gt”,”eq”.
注意index为0取第一个，为1时取第一，第二个，当为2之后的数字则按正常顺序取。
changeActive(0)效果
changeActive(1)效果
changeActive(2)效果
12.请求报400 Bad Request并且后台打印The validcharacters are defined in RFC 7230 and RFC 3986异常-多部分情况是tomcat的版本错误，换成低版本或更高版本的就好了。
13.a里href相关设置。
如果不想要点击锚点跳转，href怎么设置了<a href=””/>，一种是“#”，另一种是“javascript:;”到底用哪个，用“#”也不会跳转，但会回到页面头部，用“javascript:;”不会跳转，也不会回到页面头部。
14.Js数组：
初始化：var arr =new Array();
for(var i in arr){
console.log(arr[i]);
}
添加元素：push()
拼接字符串：a.concat(b)
排序：sort();
15.js读取服务器txt配置文件，使用ajax方式：
var txt=$.ajax({url:"../js/config.txt",async:false});
console.log(txt.responseText);
比如配置如下：
#测试
10000:哈哈
代码是：
var htmlobj= $.ajax({url:"/wx/js/config.txt",async:false});
var result = new Array();
var arr = htmlobj.responseText.split("\n");
for(var i in arr){
if(arr[i].startsWith("#") || arr[i].trim() == ""){
continue;
}else{
result.push(arr[i]);
}
}
15.jsp里el表达式字符串拼接
使用concat方法
比如
<input type="text">${session.name.concat(" - ".concat(session.age))}</input>其中name:cy
age:12
输出的结果为：cy - 12
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)