本篇内容主要讲解“AJAX中Get请求报错404如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“AJAX中Get请求报错404如何解决”吧!
主要项目结构
java
vo
ResultInfo //数据封装成的对象
LoginServlet //处理请求的后端代码
com.sisyphus
webapp
login.jsp
html //存放页面
js //jquery
layui //前端项目页面
index.jsp //首页
在介绍完项目的结构之后,对项目做一个简单的说明,并展示主要代码:
通过拷贝了前端项目的一个表单,表单中包含一个text类型的input,一个password类型的input,还有一个button类型的按钮,通过onclick属性调用函数,取到用户输入的数据并进行校验,满足校验后发送ajax请求,将data返回指定的后台url。
function login(){
//获取数据
var username = $("#username").val();
var password = $("#password").val();
console.log(username)
console.log(password)
//校验参数
if(isEmpty(username)){
$("#sp").html("用户名不能为空");
return;
}
if(isEmpty(password)){
$("#sp").html("密码不能为空");
return;
}
//发送请求
$.ajax({
type:'get',
/*url:'../userlogin',*/
url:'userlogin',
data:{
username:username,
password:password
},
dataType:'json',
success:function(data){
if(data.code == 1){ //操作成功
//跳转
console.log(data);
alert("登录成功")
window.location.href = "../index.jsp";
}else{ //操作失败
console.log(data);
$("#sp").html(data.msg);
}
}
});
}
//非空校验
function isEmpty(str){
if(str == undefined || str.trim() == ""){
return true;
}
return false;
}
在后台中创建返回值类型对象,接收数据并进行校验检查,最后转换成相应的数据类型进行响应,写出给前台。
response.setContentType("application/json;charset=UTF-8");
//创建一个返回值对象
ResultInfo resultInfo = new ResultInfo();
resultInfo.setCode(1);
//接收参数
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username+"----"+password);
//参数校验
if(username == null || "".equals(username.trim())){
resultInfo.setCode(0);
resultInfo.setMsg("账号不存在");
}
if(password == null || "".equals(password.trim())){
resultInfo.setCode(0);
resultInfo.setMsg("账号不存在");
}
if(!"zhangsan".equals(username)){
resultInfo.setCode(0);
resultInfo.setMsg("用户不存在");
}
if("zhangsan".equals(username)&&!"123456".equals(password)){
resultInfo.setCode(0);
resultInfo.setMsg("密码有误");
}
//将数据转换成json格式的数据
String ri = JSON.toJSONString(resultInfo);
//写出json数据
response.getWriter().write(ri);
在第一次运行项目时,我的login.jsp在html目录中,而在Java代码中的注解如下:
@WebServlet("/userlogin")
在jsp文件的ajax请求中url标识将请求前台的地址,按照当前的注解我们会出现get404:
我们点进去观察:
发现它的地址是war包下的html下的userlogin,很明显这个路径是不对的,我们在注解中只标记了@WebServlet(“/userlogin”)。于是我们可以认为出现get404的原因是ajax请求到错误的路径。
很明显ajax在寻找url时预先拼接上了自己所在的目录html。
将login.jsp放在webapp根目录下,但是显然当我们项目的页面越来越多之后,都放在根目录下很不合适,于是我推荐采取第二种办法:
在ajax请求的url前加上…/返回根路径进行前端请求路径的匹配:
//发送请求
$.ajax({
type:'get',
url:'../userlogin',
/*url:'userlogin',*/
data:{
username:username,
password:password
},
dataType:'json',
到此,相信大家对“AJAX中Get请求报错404如何解决”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/qq_60934240/article/details/126389821