ajax实现页面不刷新前后台交互

Posted CiscoLee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax实现页面不刷新前后台交互相关的知识,希望对你有一定的参考价值。

必要文件:

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

以上是关于ajax实现页面不刷新前后台交互的主要内容,如果未能解决你的问题,请参考以下文章

ajax的底层前后台交互

前后端的分离

ajax请求方式

前后台交互方式

基于Tomcat服务器,通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现JSP前后端交互)

基于Tomcat服务器,通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现JSP前后端交互)