参考文献
利用ajax和servlet实现前后端数据交互(json)
前后端数据交互
一、导入ajax
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
先在前端导入jQuery
二、前端写script脚本
window.onload=function(){//在页面加载的时候调用这个函数
var jsondata={//前端可以发送数据给后端,json形式
"name":"zhansan",
"password":"123456"
}
$.ajax({//向服务器发出请求的方法
type:"post",
url:"login",//向服务器请求的url
data:jsondata,//注意,就算不需要发送数据给后端也要有data
success:function(data){//请求服务器成功后返回页面时页面可以进行处理,data就是后端返回的数据
alert("前端请求后端成功,返回了数据,数据显示用户名为"+data.name);
}
error:function(e){
alert("发生未知错误");
}
}
)
}
前端部分完成,这里是利用ajax先手动向后端发出请求,后端接收到请求后调用servlet处理并返回结果后,前端才接收到数据并调用success或error处理。
三、后端的servlet代码
@WebServlet("/login")//这里和ajax里面的url一致,代表请求的是这个servlet
public class login extends HttpServlet {
前面请求类型为post函数
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//从前端传递的request中取值
System.out.println("前端传递过来的名字是"+request.getParameter("name"));
//构造json字符串传递回前端,\为java转义符号为了转义双引号
//注意这里格式要求很严格,不能用单引号,建议使用第三方框架自动生成json字符串
String s= "{\"name\":\"张三\",\"password\":\"123456\"}";
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");//返回的格式必须设置为application/json
response.getWriter().write(s);//写入到返回结果中
//完成,执行到这里就会返回数据给前端,前端结果为success,调用success里面的内容
}