页查询时如果遇到以下错误：

java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

请按照以下方法进行修改：

一、分页查询链接修改为按钮：

<input type="button" onclick="jumpPage('<%=keyWord%>', <%=totalPage%>)" value="最后一页" />

其中keyWord和totalPage为Servlet通过request.setAttribute()传递而来的参数。

二、加入JavaScript

<script language="JavaScript" type="text/javascript">

function jumpPage(kw, pgNum) {/*跳转到页面，并传入参数*/

var url="pageQuery.do?keyWord=" + encodeURIComponent(kw);

url +="¤tPage=";

url +=pgNum;

window.location.href=url;

}

</script>

此处关键点在于调用了JavaScript中的encodeURIComponent()函数，会把其中的某些字符将被十六进制的转义序列进行替换。

说明：

1、该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

2、其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

encodeURIComponent("你好，世界！")的结果：

%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81

encodeURIComponent("Hello world!")的结果：

Hello%20world!

encodeURIComponent(",/?:@&=+$#")的结果：

%2C%2F%3F%3A%40%26%3D%2B%24%23

这样以来，就可以通过GET方法传递汉字了。

ue路由传参的两种方式query和params

点击打开视频讲解更加详细

【面试题】Vue路由传参的两种方式query和params_哔哩哔哩_bilibili

S传参技巧总结

1.隐式创建 html 标签

<input type="hidden" name="tc_id" value="{{tc_id}}">

这种方法一般配合ajax，上面的value使用了模板引擎

2.window['data']

window['name']="the window object";

3.使用localStorage，cookie等存储

window.localStorage.setItem("name", "xiaoyueyue");

window.localStorage.getItem("name")

特点：

1、localStorage 是持久存储，不主动删除 一直存在 sessionStorage 是临时存储,关闭浏览器数据就没了

2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享数据

4.获取地址栏方法

自己封装的方法

function parseParam(url) {

var paramArr=decodeURI(url).split("?")[1].split("&"),

obj={};

for (var i=0; i < paramArr.length; i++) {

var item=paramArr[i];

if (item.indexOf("=") !=-1) {

var tmp=item.split("=");

obj[tmp[0]]=tmp[1];

} else {

obj[item]=true;

}

}

return obj;

}

正则表达式方法

function GetQueryString(name) {

var reg=new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r=window.location.search.substr(1).match(reg);

if (r !=null) return unescape(r[2]); return null;

}

5.标签绑定函数传参

<!--base-->

<button id="test1" onclick="alert(id)">test1</button>

<!--高级-->

<button id="test" name="123" yue="xiaoyueyue" friend="heizi" onclick="console.log(this.getAttribute('yue'),this.getAttribute('friend'))">test</button>

this拓展

使用this传参，在使用art-template中琢磨出来的，再也不用只传递一个id拼接成好几个参数了！happy！

var box=document.createElement("div");

box.innerHTML="<button id='1' data-name='xiaoyueyue' data-age='25' data-friend='heizi' onclick='alertInfo(this)'>点击</button>";

document.body.appendChild(box);

// name,age,friend

function alertInfo(val) {

console.log(val);

alert('大家好,我是' + val.dataset.name + ', 我今年' + val.dataset.age + '岁了，我的好朋友是' + val.dataset.friend + ' !')

}

event

既然可以使用this，那么在事件当中event.target方法也是可以的：

根据 class 获取当前的索引值，参数可以为 event对象

var getIndexByClass=function (param) {

var element=param.classname ? param : param.target;

var className=element.classname;

var domArr=Array.prototype.slice.call(document.querySelectorAll('.' + className));

for (var index=0; index < domArr.length; index++) {

if (domArr[index]===element) {

return index;

}

}

return -1;

},

6.HTML5 data-* 自定义属性

<button data-name="xiaoyueyue">点击</button>

var btn=document.querySelector("button")

btn.onclick=function () {

alert(this.dataset.name)

}

7.字符串传参

单个参数

var name='xiaoyueyue',

age=25;

var box=document.createElement("div");

box.innerHTML='<button onclick="alertInfo(\'' + name + '\')">点击</button>';

document.body.appendChild(box);

// name, age

function alertInfo(name, age, home, friend) {

alert("我是" + name)

}

多参传递

var name='xiaoyueyue',

age='25',

home='shanxi',

friend='heizi';

var params=""" + name + "","" + age + "","" + home + "","" + friend + """;

var box=document.createElement("div");

box.innerHTML="<button onclick='alertInfo(" + params + ")'>点击</button>";

document.body.appendChild(box);

// name, age,home,friend

function alertInfo(name, age, home, friend) {

alert("我是" + name + ',' + "我今年" + age + "岁了！")

}

复杂传参

var data=[

{

"name": "xiaoyueyue",

"age": "25",

"home": "shanxi",

"friend": "heizi"

}

]

var box=document.createElement("div");

for (var i=0; i < data.length; i++) {

box.innerHTML="<button id='btn' onclick='alertInfo(id,\"" + data[i].name + "\",\"" + data[i].age + "\",\"" + data[i].home + "\",\"" + data[i].friend + "\")'>点击</button>";

}

document.body.appendChild(box);

function alertInfo(id, name, age, home, friend) {

alert("我是" + name + "," + friend + "是我的好朋友")

}

8.arguments

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。它是一个类数组的对象。

<button onclick="fenpei('f233c7a290ae11e8a0f00050568b2fdd','100','0号 车用柴油(Ⅴ)')">分配</button>

function fenpei() {

var args=Array.prototype.slice.call(arguments);

alert("我是" + args[2] + "油品，数量为 " + args[1] + " 吨， id为 " + args[0])

}

喜欢这样文章的可以关注我，我会持续更新，你们的关注是我更新的动力！需要更多java学习资料的也可以私信我！

祝关注我的人都：身体健康，财源广进，福如东海,寿比南山，早生贵子，从不掉发!