实现Servlet项目的前后端交互

servlet前后端交互流程

总体流程图

前端获取数据之后,通过Ajax传给后端。前端通过Ajax与后端交互

Ajax格式

若url引用错误会导致404错误,后端没有导入jar包会导致500-内部服务器错误。

后端通过jdbc和数据库实现交互,交互由DBco,MysqlUtil,sql语句三者组成。

后端代码

所以前后端交互流程为:前端←→后端←→数据库

前后端文件之间的关系:

项目目录

新建Servlet项目步骤

1.前台HTML页面,引入css与js

2.引入Ajax,实现与后端的数据传输

引入jquery

<script src="https://cd3.n.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

Ajax代码(data:data,//data代表key -value类型的数据)

<script>
	function get(){
		var url = "http://ip地址:端口号/项目名称/servlet地址";
		 $.ajax({
		        type: "get", //指定提交的类型 get对应 doGet()方法,post--->doPost()犯法
		        url: url,    //传输地址的URL
		        data: {"id":"1"}, //data代表我们的数据  key -value类型的数据
		        cache: false, //缓存
                    dataType: "JSON",
		        async : false,  
                    //success和error代表是否返回成功,既后台给前台传输数据是否成功
		        success: function (data,textStatus, jqXHR)
		        {
		        	//alert(data.data);
		        	//console.log(data);
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown) { 
		            alert(typeof(errorThrown));
		        }
        });
	}
</script>

传输数据代码

var data = {
	"account":$("#account").val(),
	"password":$("#password").val(),
	 "ConfirmPassword":$("ConfirmPassword").val()
};
经验分享 程序员 微信小程序 职场和发展