必要文件:
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" οnsubmit="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