网站开发前后端交互总结

最新推荐文章于 2024-05-16 23:24:37 发布

小天要奔跑

最新推荐文章于 2024-05-16 23:24:37 发布

阅读量1k

点赞数

分类专栏：网站开发文章标签：网站 Java 前后端交互

本文链接：https://blog.csdn.net/qq_38861679/article/details/101608691

版权

网站开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近一个月接触了如何搭建一个简单的竞赛网站平台，可以描述为:实现简易竞赛网站平台，包括录入学生信息数据库、队员组队、登录队伍账户等功能，然后学生就可以通过这个网站提交课程设计结果文件，查看到队伍排名和历史记录等（类似于打比赛的网站）。这里我们采用的是IDEA作为java语言的开发环境，mysql作为后端数据库，前段页面包括css、html、js等，tomcat作为服务器软件，期间我掌握了许多新东西，在此记录。

1.前端如何利用js中的ajax向后端发送参数或请求等（ajax需通过事件触发）。

Var json_value={"user_id":0};
$.ajax({
    type: "post",
    url: "userload",//对应后端的user_load
    data:JSON.stringify(json_value),//必须序列化，格式才正确，才能正确发送到后端
    cache: false,
    processData: false,
    contentType: "application/json",//声明内容是json内容
    dataType: "json",
    success: function (data) {
    }
});

2.Java后端(SpringBoot框架)如何接受前端传过来的json格式的对象。

@PostMapping("/userload")
@ResponseBody
public void userload(@RequestBody HashMap<String, String> map)
{
    String user_id=map.get("user_id");
}

3.Java后端(SpringBoot框架)如何向前端发送json格式的对象。

@PostMapping("/user_info")
public void user_info(HttpServletRequest request, HttpServletResponse response) {
	Map<String, Object> ControJsonMap = new HashMap<String, Object>();
    ControJsonMap.put("dataStatus","1");
    try{
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        JSONObject json = new JSONObject();
        for (Map.Entry<String, Object> map :ControJsonMap.entrySet()) {
            json.put(map.getKey(), map.getValue());
        }
        char[] buf = json.toString().toCharArray();
        if (buf.length > 0) {
            out.write(buf);//发送
            out.flush();
            out.close();
            ControJsonMap.clear();
        }
        } catch (IOException e) {
            e.printStackTrace();
        }
}

4.前端利用ajax接受java后端发送过来的json格式的对象(ajax需通过事件触发)。

$.ajax({
    type: "post",
    url: "user_info",//对应后端的user_info
    data:“1”,//这里后端没有接受语句，随便发送啥
    cache: false,
    processData: false,
    contentType: "application/json",//声明内容是json内容
    dataType: "json",
    success: function (data) {//data即为后端返回值
    	if(data["dataStatus"]=="1")
    	alert("success");
    }
});

5.ajax的使用需要导入相应的js文件包，且需注意js文件的导入顺序。

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script>new WOW().init();</script>

6.若想每次访问该网页，都触发一个事件来完成ajax调用，可在body标签里面使用onload事件。

<body id="top" onload="team_name(),proj2_rank()">

7.当网站项目需要放到服务器上时，可按网上教程进行修改配置等(如修改mysql连接密码，设置成使用外部tomcat，将项目打包成war包，修改@SpringBootApplication 注解下面对应的启动类等)，若出现错误，可利用F12，postman等方式调试，也可通过IDEA远程服务器tomcat来进行调试(要求本地代码要和服务器一致)。

8.这次将工程部署到服务器上时，就一直出现500的错误，代表服务器内部错误，最后明白错误类型其实通过F12就能看出来。因为浏览器会报500 的状态错误，然后就有一个语句：
Message: net.sf.json.JSONObject
这个地方就是表明，net.sf.json.JSONObject这个在服务器后端代码中有问题，然而在自己的IDEA本地工程时则没有这个错误，观察猜测是因为服务器端缺少json的jar包。SpringBoot工程配置了maven仓库，自动把 json的jar包导入进来了，然而打成war包的时候却没有把这些没有加入的工程的jar包一起打包，所以造成错误，然后我把maven仓库下面的对应jar包复制到服务器端的竞赛网站的jar包中就解决了问题。
在这里插入图片描述

小天要奔跑

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
网站开发前后端交互总结

最近一个月接触了如何搭建一个简单的竞赛网站平台，可以描述为:实现简易竞赛网站平台，包括录入学生信息数据库、队员组队、登录队伍账户等功能，然后学生就可以通过这个网站提交课程设计结果文件，查看到队伍排名和历史记录等（类似于打比赛的网站）。这里我们采用的是IDEA作为java语言的开发环境，mysql作为后端数据库，前段页面包括css、html、js等，tomcat作为服务器软件，期间我掌握了许多新东西...
复制链接

扫一扫