頁查詢時如果遇到以下錯誤：

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()傳遞而來的參數(shù)。

二、加入JavaScript

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

function jumpPage(kw, pgNum) {/*跳轉(zhuǎn)到頁面，并傳入?yún)?shù)*/

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

url +="¤tPage=";

url +=pgNum;

window.location.href=url;

}

</script>

此處關鍵點在于調(diào)用了JavaScript中的encodeURIComponent()函數(shù)，會把其中的某些字符將被十六進制的轉(zhuǎn)義序列進行替換。

說明：

1、該方法不會對 ASCII 字母和數(shù)字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。

2、其他字符（比如 ：;/?:@&=+$,# 這些用于分隔 URI 組件的標點符號），都是由一個或多個十六進制的轉(zhuǎn)義序列替換的。

encodeURIComponent("你好，世界！")的結(jié)果：

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

encodeURIComponent("Hello world!")的結(jié)果：

Hello%20world!

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

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

這樣以來，就可以通過GET方法傳遞漢字了。

ue路由傳參的兩種方式query和params

點擊打開視頻講解更加詳細

【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibili

S傳參技巧總結(jié)

1.隱式創(chuàng)建 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 是臨時存儲,關閉瀏覽器數(shù)據(jù)就沒了

2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享數(shù)據(jù)

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.標簽綁定函數(shù)傳參

<!--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拼接成好幾個參數(shù)了！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方法也是可以的：

根據(jù) class 獲取當前的索引值，參數(shù)可以為 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.字符串傳參

單個參數(shù)

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對象是所有（非箭頭）函數(shù)中都可用的局部變量。你可以使用arguments對象在函數(shù)中引用函數(shù)的參數(shù)。它是一個類數(shù)組的對象。

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

function fenpei() {

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

alert("我是" + args[2] + "油品，數(shù)量為 " + args[1] + " 噸， id為 " + args[0])

}

喜歡這樣文章的可以關注我，我會持續(xù)更新，你們的關注是我更新的動力！需要更多java學習資料的也可以私信我！

祝關注我的人都：身體健康，財源廣進，福如東海,壽比南山，早生貴子，從不掉發(fā)!