java servlet 后台响应ajax请求

网页异步请求在各种网站、系统中可谓无处不在,本文就介绍一个最简单的从前端发送请求-->java后台连接数据库-->从数据库读取数据-->把数据返回前端-->前端接收请求的例子。

首先,在后台建立一个servlet:右键一个包,new-->servlet,输入类名,就可以创建一个空白的servlet了。刚创建的servlet包含如下内容:

package com.zhao;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Zhao1
 */
@WebServlet("/Zhao1")              //这里是注解,设置请求的地址,默认是斜杠加类名。也可以采用配置的方式,下面会介绍。
public class Zhao1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Zhao1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//这里是响应post请求的方法,一会我们就发post请求,所以一会的代码写在这里。这里标记为"后台post方法"
	}

}



其中上面那个注解也可以不用,而采取xml配置的方式,具体做法是:
在web.xml文件中添加一下内容:

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>zhao1</servlet-name>
    <servlet-class>com.zhao.zhao1</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>zhao1</servlet-name>
    <url-pattern>/Zhao1</url-pattern>
  </servlet-mapping>

两个servlet-name对应起来,servlet-class就是类那个文件,按住ctrl鼠标指上去应该可以变成小手。url-pattern就是发送ajax请求的Url地址,在注解里就是括号里的字符串。
现在就可以响应请求啦!先返回一个字符串试试,前台能不能接收到。
ajax代码就不详细介绍了,只贴一段代码:

$("#zhaotestAjax").click(function(){        
	$.ajax({
            url:"Zhao1",
            type: "post",
            contentType:"application/json",
            success: function (result, status) {
                    var str=result;
		    alert(str);
            }, error: function (res) {
            }
        });
});

这里有一点需要注意的,Url在注解里是“/Zhao1”,在发ajax请求的时候则是“Zhao1”,没有那一个斜杠。
这时候没出错的话点击按钮是没反应的,也不出错,因为我们还没写返回什么。没错的话下面就写返回什么。
在后台post方法处添加下面两句:

response.setCharacterEncoding("utf-8");
//写入到前台         	
response.getWriter().write("测试成功");

第一句是设置编码,以免因为中文出现乱码。第二句就是向前台传输数据了。
点击id为zhaotestAjax的这个按钮,出现弹框:测试成功。或者在调试里看到str这个变量有值了,是这句话,那表示前后台传输数据成功了,就像打通了任督二脉,人类登上月球迈出的第一步,从此再复杂的业务逻辑,都是在这个过程的基础上添砖加瓦,在前后台进行数据处理。数据传输的一小步,网页请求的一大步!
但是这样肯定是不够的,前后台通了,后台和数据库还没通。数据库我用的是mysql,简单粘贴一下连接数据库的代码。
因为是个小例子,这里也不用框架了,也不用配置文件了,连接字符串什么的都放在类里了。

    private static final String driver = "com.mysql.jdbc.Driver"; //数据库驱动  
    private static final String url="jdbc:mysql://localhost:3306/gaofen_pie?serverTimezone=UTC"; //连接数据库的URL地址  
    private static final String username="root";//数据库的用户名  
    private static final String password="root";//数据库的密码</span>  
    private static Connection conn=null;  

上面这是连接字符串,Url地址后面加的serverTimezone是因为不加它会有乱码。

Class.forName(driver);
if(conn==null){ 	
        conn=DriverManager.getConnection(url, username, password);  
	Statement stmt =  conn.createStatement(); 
	ResultSet rs = stmt.executeQuery("select * from pie1");
	//下面进行数据操作
}

上面是连接过程,最后那个rs就是获取到的结果了,数据库和数据表请自己创建,这是我创建的。


数据库名就是gaofen_pie,表名就是pie1。
获取到了rs,还要遍历把里面的数据读出来,就是用它的next方法。

		try {
			Class.forName(driver);
	        if(conn==null){  
	            conn=DriverManager.getConnection(url, username, password);  
	            Statement stmt =  conn.createStatement(); 
	            ResultSet rs = stmt.executeQuery("select * from pie1"); 
	            JSONObject jsonObject = new JSONObject();
	            ArrayList<Object> arrList=new ArrayList<Object>();
	            //int i=0;
	            while (rs.next()) {
			此处进行数据操作//
	            }
                response.getWriter().write(jsonObject.toString());
	            if (rs != null) { 
	                rs.close(); 
	            } 
	            if (stmt != null) { 
	                stmt.close();    
	            } 
	            if (conn != null) { 
	                conn.close();    
	            } 
	    		//out.print("1");
	            //return conn;  
	        }else{
	        	//out.print("连接失败");
	        	
	        }
	        //return conn;
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

其中缺什么包就引用一下(mysql的jdbc connector),出错了就自动修正一下,一般就是用try catch包裹一下。
while(rs.next)这一句相当于遍历,每次对rs中的一条记录进行操作。这里就要考虑一下我要用的这个数据应该怎么获取,怎么封装。
前台和后台传输数据都是用字符串来传输的,但是数据量大的时候一个个的读字符串很麻烦,于是就有了json这种伟大的发明。
json其实也是一串字符串,但是它有特定的格式,可以被JSON对象解析成对象。就好像螃蟹不好运输,我把它捆一下,运到了目的地再拆开。数据对象封装成json字符串,传递给前台,前台解析后又还原成和原来一样的对象。这就是json的意义。
至于怎么封装数据,就要结合实际情况选择相对的方法了。我是先把我需要的数据组成一个二维数组,然后分别把这个二维数组放到json对象里。因为在前台用的也是二维数组,所以选择这样组装。
最后贴上post里面的所有代码

		try {
			Class.forName(driver);
	        if(conn==null){  
	            conn=DriverManager.getConnection(url, username, password);  
	            Statement stmt =  conn.createStatement(); 
	            ResultSet rs = stmt.executeQuery("select * from pie1"); 
	            JSONObject jsonObject = new JSONObject();
	            ArrayList<Object> arrList=new ArrayList<Object>();
	            //int i=0;
	            while (rs.next()) {
	            	Object[] obj=new Object[8];
	            	for(int i1=1;i1<obj.length+1;i1++){
	            	obj[i1-1]=rs.getString(i1);
	            	}
	            	arrList.add(obj);
	            }
            	
	            jsonObject.put("Consumption", arrList);
            	response.setCharacterEncoding("utf-8");
                //写入到前台
            	
                response.getWriter().write(jsonObject.toString());
	            if (rs != null) { 
	                rs.close(); 
	            } 
	            if (stmt != null) { 
	                stmt.close();    
	            } 
	            if (conn != null) { 
	                conn.close();    
	            } 
	    		//out.print("1");
	            //return conn;  
	        }else{
	        	//out.print("连接失败");
	        	
	        }
	        //return conn;
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

前台ajax所有代码:

        $.ajax({
            url:"Response2",
            type: "post",
            contentType:"application/json",
            success: function (result, status) {
                
                    var str=result;
                    var obj = JSON.parse(str);  //用这个方法可以把json字符串解析成对象。
                    
                    for(var i=0;i<obj.Consumption.length;i++){    //这里因为是二维数组,用了俩循环
                    	for(var j=1;j<obj.Consumption[i].length;j++){
                    		obj.Consumption[i][j]=parseFloat(obj.Consumption[i][j]);
                    	}
                    	chinaConsumptionLevel.push(obj.Consumption[i]);
                    }

    
            }, error: function (res) {

            }
        });

其中chinaConsumptionLevel是一个事先声明的空的一维数组。这样最终组装之后,最后得到我想要的数据和数据形式,就是这样的:

chinaConsumptionLevel=[
 ["一区",119.44507245851,34.613350841033, 22023, 24982, 27760, 30350, 33337], ["二区",119.46848114625,34.619757429255, 15200, 17852, 20624, 22984, 26261]
];

至此,终于完成了从后台去数据到前台的任务。


  • 15
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: ServletAjax本身是两个不同的技术,但它们可以结合使用来实现动态Web应用程序。 ServletJava Web中的一种服务器端技术,它可以处理HTTP请求响应,生成动态内容并将其发送到客户端浏览器。在这种情况下,Servlet可以作为服务器端程序来处理来自客户端的请求,然后生成HTML或其他格式的响应。 而Ajax是一种前端Web技术,它允许Web应用程序通过异步数据交换来更新部分页面内容,而不必重新加载整个页面。它使用JavaScript来向服务器请求数据,并在不刷新页面的情况下更新页面。 因此,ServletAjax可以结合使用来实现动态Web应用程序。例如,当用户在前端页面上点击某个按钮时,可以使用AjaxServlet发送异步请求Servlet接收请求并处理数据,然后将响应发送回前端页面,使前端页面能够动态更新内容而不必重新加载整个页面。 ### 回答2: Servlet是一种Java编写的服务器端技术,用于处理客户端(浏览器)发送的HTTP请求并生成响应。而Ajax是一种在客户端中使用JavaScript和XMLHttpRequest对象实现异步通信的技术。 ServletAjax之间存在一定的关系。通常情况下,Ajax被用于在网页上实现动态更新内容,而不需要刷新整个页面。当用户在网页中发起Ajax请求时,JavaScript会创建一个XMLHttpRequest对象,该对象负责向服务器发送异步请求。而服务器上的Servlet可以接收这个请求,并根据请求的数据进行相应的处理。Servlet可以从数据库中读取信息,对数据进行处理,并将结果返回给浏览器。浏览器通过接收到的响应数据,再使用JavaScript脚本对页面进行更新。 在这个过程中,Servlet充当了服务器端的处理功能,负责对客户端发起的请求进行处理;而Ajax则充当了客户端与服务器端之间的桥梁,通过发送异步请求和接收响应数据,实现了与服务器的交互。 总而言之,ServletAjax的关系是:Servlet作为服务器端的技术,用于处理客户端的请求;而Ajax作为客户端的技术,通过与服务器进行异步通信,实现了动态更新网页内容。两者共同协作,使网页在不刷新整个页面的情况下能够实现动态交互。 ### 回答3: ServletAjax是两个不同的技术,但它们可以结合使用来实现更好的Web应用程序。 Servlet是一种用Java编写的服务器端程序,它可以接收和处理客户端发来的HTTP请求,并生成相应的HTTP响应Servlet可以处理静态内容,也可以与数据库进行交互,生成动态内容。 Ajax是一种通过在后台与服务器进行少量数据交换的技术,它可以在不重新加载整个页面的情况下,更新部分页面内容。Ajax使用JavaScript和XMLHttpRequest对象来实现异步通信。 ServletAjax可以结合使用,以实现更好的用户体验和页面响应速度。当用户在客户端进行某些操作时,例如点击一个按钮,可以使用Ajax技术将相关数据发送到后台Servlet进行处理。Servlet可以从数据库中获取数据,并将数据转换为JSON或XML格式发送回客户端。然后,客户端的JavaScript代码可以使用这些数据更新页面的特定区域,而不需要重新加载整个页面。 通过结合使用ServletAjax,可以实现实时交互和动态更新页面,提高Web应用程序的性能和用户体验。例如,可以通过Ajax技术在不刷新整个页面的情况下,动态加载新的数据、实时显示搜索结果、动态更新统计数据等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值