基础-Servlet前后端交互

eclipse创建好html文件和servlet之后得到如下页面

前端html

1.首先在html中引入Jquery，把下面的代码插入到head标签下

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

2.之后编写我们的前端html内容，在body标签内编写一下内容

	用户名<input id="username" type="text" name="username"/><br/>
	<input type="button" value="提交" onclick="getInput()"/><!--设置点击事件，点击提交按钮时触发getInput()方法(函数)-->

预计效果

3.在script标签内编写getInput()方法

    function getInput(){
		var username=$("username").val();/*Jquery语句，
		等价于js中的document.getElementById("username").value;*/
		$.ajax({
			type:"get",//get我们执行的是获取
			url:"http://localhost:8080/ServletProject/myServlet",//数据传输路径，就是servlet的路径
			data:{"username":username},//要传输的数据内容，注意ajax传输json类型的数据
			success:function(value){
				
			}
		});
	}

4.整体页面如下

完成前端内容的编写。

 后端servlet

1.我们要想接收前端传输过来的数据，那么在doGet方法中进行操作，通过以下内容可以接收到从前端传输过来的数据并打印出来。

String username=request.getParameter("username");
/*request.getParameter里面的参数要与ajax里面的data:{key:value}中的key保持一致*/
System.out.println(username);

2.要想向前端返回数据，那么对response进行操作。通过以下操作可以将数据传回前端。

response.setCharacterEncoding("utf-8");//数据编码格式设置
response.setContentType("application/json;charset=utf-8");
String data="{\"message\":\"传输成功\"}";
//我们要传输的数据，因为ajax以json作为数据传输载体，所以我们返回的数据也是json类型的
response.getWriter().append(data);

在前端也加上如下内容来显示从servlet传回来的数据。

console.log(value.message);

3.前端html代码如下

 4.后端servlet代码如下

 5.编写完代码之后右建点击html空白处，选择Run As->1 Run on Server->Next->Finish启动项目

6.选中出现的一串儿路径，在浏览器中打开。

7.在浏览器中进行测试，查看返回值。