寒假答辩之基于ssm框架的家教网站之前端篇

最新推荐文章于 2023-05-17 12:11:49 发布

吾是路人甲乙丙丁

最新推荐文章于 2023-05-17 12:11:49 发布

阅读量959

点赞数 1

本文链接：https://blog.csdn.net/qq_41767383/article/details/89500482

版权

本文介绍了基于SSM框架的家教网站前端开发经验，重点讲解了数据交互中的Ajax使用，Bootstrap的模态框和面板功能，定位处理，分页实现，以及照片上传的细节。作者强调了前端代码规范和学习Bootstrap的重要性，并分享了分页和图片上传的实现思路。

摘要由CSDN通过智能技术生成

前言：这是我第一次参与做一个完整的网站，真的和自己做的静态页面的感觉太不一样啦。自己做不用管数据的交互时想做成什么样就做成什么样，但是连接后台就需要考虑数据的传递，数据的格式，怎么截取到自己要的数据，怎么把数据渲染到页面。什么时候显示什么模块等等之类的要考虑好多东西。我这里只讲最简单的应用，具体那些复杂的应用等你们用到了就知道多麻烦了。

注意：这篇博客只讲了我在写这个项目时遇到的难做的部分，没有具体的网站介绍，最基本一个网站该有的东西并没有介绍

1.数据交互之ajax

看代码，有注释，一看就懂，会不会用看自己。

function submitmessage(btn,turl) {
    var datasubmit=$(this).parent().next().children().html();//获取传给后台的数据
    var result=""//准备接受后台传来的数据
    $.ajax({
        type: "POST",
        url: turl,
        data: datasubmit,//给后台传数据
        success: function (data) {//后台传过来数据都在data里面
            var arrLen = data.length;
	    if (arrLen > 0) {
		for (var i = 0; i < arrLen; i++) {//开始拆分数据，做要渲染的数据，其中data[i].iid的意思是data中第几条数据的名为lid的数据项
		        result += '<tr class="' + type + '">' +
		        '<td class="order-num-con">' + data[i].iid + '</td>' +
			'<td class="subject-con">' + data[i].course + '</td>' +
			'<td class="grade-con">' + data[i].eduId + '</td>' +
			'<td class="finish-time-con">' + data[i].signTime + '</td>' +
			'<td class="handle-con">' + '<a href="#">投诉</a>' + '</td>' +
			'</tr>';
		}
            }e