在我们以往的工作中,发送ajax都是借助框架(比如SpringMVC)来实现的,最近在做公司的一个需求,就是在一个工程中查询数据库,但是这个工程没有引入Spring相关的框架,我不想用form表单提交的方式去实现,就想写一个简单的servelt,发送ajax请求访问这个servlet,servlet再去访问数据库,之后将查询到的结果返回到页面。我将此工作分为了两部。
第一步,发送ajax请求到servlet并返回结果
第二步,在servlet中查询数据库。
这篇文章先简述如何在一个html页面中发送ajax请求到servlet并返回结果
首先使用idea工具新建一个纯的maven工程
一。新建一个servlet.并配置web.xml
这一步比较简单,我在之前的博客中有写,可以去查看。
https://blog.csdn.net/liuying1802028915/article/details/85162021
下面直接贴上代码:
package com.taoj.demo.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryRoleServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
PrintWriter out = response.getWriter();
String name = request.getParameter("name").trim();
String type = "-1";
try {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
// out.println("Success---llll");
out.append(type);
out.close();
} catch (Exception e){
e.printStackTrace();
}
}
}
下面是web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>HelloWorld</servlet-name>
<servlet-class>com.taoj.demo.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorld</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>QueryRoleServlet</servlet-name>
<servlet-class>com.taoj.demo.servlet.QueryRoleServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryRoleServlet</servlet-name>
<url-pattern>/queryRole</url-pattern>
</servlet-mapping>
</web-app>
下面在一个简单的html页面中引入了jquery ,并写了一个简单的ajax请求,很简单,我这里直接贴一下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax与servlet的练习</title>
<script src="../js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
我爱中国<br>
<button id="btn">发送ajax</button>
</div>
</body>
<script>
$(function(){
$("#btn").click(sendAjax);
});
function sendAjax(){
var url = "http://127.0.0.1:8080/ser/queryRole";
var name = "nb";
alert("name:"+name+", url:"+url);
var data = {
name: name
};
$.ajax({
type: "get",
url: url,
data: data,
dataType: "json",
success: function(result){
alert("success--result:"+result);
},
error: function(){
alert("error");
}
});
}
</script>
</html>
点击按钮,就会发送ajax到queryRole的servlet,并返回一个结果。下一篇博文讲解如何在一个servlet中查询数据库。
不积跬步,无以至千里
不积小流,无以成江海