必要文件:
jquery-form.js
jquery-3.3.1.js
(被刷新部分div的class此處寫為left)
在jsp頁面中實現將路徑交給js的方法:
var url_1 = "<%=basePath%>";
function getURL(){
return url_1;
}
js代碼:
//1、被表單綁定的函數
function toGo(){
//異步加載json數據
$(function () {
var url_1 = getURL();//該處為獲得地址
$.ajax({
url: url_1+'/Login?uname=cisco&pwd=1234',
type: 'post',
dataType: 'json',
timeout: 1000,
cache: false,
//async:false,
beforeSend: LoadFunction, //加載執行方法
error: erryFunction, //錯誤執行方法
success: succFunction //成功執行方法
});
function LoadFunction() {
$(".left").html('加載中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$(".left").html('');
//eval將字符串轉成對象數組
var json = eval(tt); //數組
var i = 0; //用於統計記錄的條數，實現分頁，點擊下一頁，則向前，初始狀態為第一頁
$(".left").html("" + json[0].uname + " " + json[0].pwd + " " + json[0].email + "");
$.each(json, function (index, item) {
//循環獲取數據
i=i+1;
$(".left").html("" + json[index].uname + " " + json[index].pwd + " " + json[index].email + "");
});
}
});
}
2、實現html不直接提交，而交給js:
$(document).ready(function() {
var options = {
//需要刷新的區域id
target:'.left',
};
//綁定FORM提交事件
$('#formId').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
3、html表單綁定:
<div id="login">
<form action="<%=basePath%>Login" method="post" onsubmit="return toGo();" id="formId">
賬號:<input type="text" name="uname" id="uname"/>
密碼:<input type="password" name="pwd" id="pwd"/>
<input type="submit" value="提交">
</form>
</div>
<div class="left"></div>
總結:2那里實現了綁定要刷新的div，以及綁定form事件，1則是該事件的具體執行方法，3則是對1和2的使用。
注意：以上標相同顏色的，需要注意其中的關系，這些都是重點。
完整servlet和前端代碼:https://www.cnblogs.com/ciscolee/p/10392484.html