后端——eclipse实现前端后端的交互(2)

1.新建前后端文件

新建HTML文件和后端交互Servlet文件。新建文件的地址也有所要求,Servlet文件要在JavaResources下的src中。HTML文件在WebContent下

2. 引入jqury文件

后端与前端的互传需要通过jQuery的ajax,所以要传入jQuery的包到eclipse中,传入位置与HTML文件一致,放在WebContent下(同样css文件或其他img等都可以放在该目录下)

3.前端内容

在前端界面书写jquery内容。ajax格式如下。

html 复制代码
<script src="js/jquery.js"></script>
<script>

    $.ajax({
    	url:"testServlet",
    	type:"get", //请求方式 get post
    	success:function(value){
    		console.log(value)
    	},
    	error:function(){
    		alert("出错啦")
    	},
    })
</script>

其中,**"url"**为所连接后端的文件名称。

"success"为请求成功时执行的代码 ,"error"为// 请求失败时执行的代码

"type"为不同的请求方式,get post传参形式不同,请求方式post需要传入data域(账户密码为例)

javascript 复制代码
data:{
            account:account,
            password:password
        }

只要能写地址的地方,都可以发起get请求 浏览器地址栏 a location.herf='' 查找,而post方式必须通过jquery +ajax实现 。

get请求通常用来查找, 而post请求用于增删改

4.后端内容

新建一个Servlet文件,我们会发现,Servlet中有两个函数doGet和doPost.分别用于接受不同请求方式。

doGet函数中一些简单的语法示例:(从本地数据库的tests表中返回name,num,date三类数据)

其中MysqlUtil是提前写好的方法包,当然方法也可以自己写。导入即可。

java 复制代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 //解决中文乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //设置后端给前端返回的数据为json格式(大量数据)
        response.setContentType("text/json;charset=utf-8");
		//接收参数
		 //查找
		String sql="SELECT * from tests";
		String[] colums= {"name","num","date"};
		String res=MysqlUtil.getJsonBySql(sql, colums);
		
		 //后端给前端返回数据
        response.getWriter().write(res);
	}

**doPost函数中一些简单的语法示例:**与doGet不同doPost需要接受前端的参数。

java 复制代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//解决中文乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //设置后端给前端返回的数据为json格式(大量数据)
        response.setContentType("text/json;charset=utf-8");
		
        //接受前端的参数
		String account=request.getParameter("account");
		String password=request.getParameter("password");
		
		//执行sql语句(查找数据库里是否有目的账号)
		String sql="select count(*) FROM user WHERE account=\""+account+"\"";

		int num=MysqlUtil.add(sql);
	
		if(num>0) {
			res="{\"code\":1,\"message\":\"该账号存在\"}";
		}else {
			res="{\"code\":0,\"message\":\"该账号不存在\"}";
		}
		response.getWriter().write(res);
	}
相关推荐
_志哥_18 小时前
解除有些网站不能复制的终极办法
前端·chrome
元闰子18 小时前
怎么让程序更高效地连起来?
数据库·redis·mysql
洲覆18 小时前
Redis 内存淘汰策略
开发语言·数据库·redis·缓存
愚昧之山绝望之谷开悟之坡18 小时前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1718 小时前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记18 小时前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽18 小时前
flutter中 getx 的使用
前端
胖头鱼的鱼缸(尹海文)19 小时前
数据库管理-第376期 Oracle AI DB 23.26新特性一览(20251016)
数据库·人工智能·oracle
麦聪聊数据19 小时前
浅谈SQL审核(一):SQL审核实现方式与常见工具的选择
数据库·sql
ajassi200019 小时前
开源 Linux 服务器与中间件(七)数据库--MySQL
linux·服务器·数据库·ubuntu·开源