基本原理：

java 前台与后台数据交换 java前后端怎么交互_sql

前端页面只能通过和tomcat进行交互，然后tomcat在和后端的servlet进行交互，然后servlet可以对数据库进行操作，但是这样操作会让servlet过于繁琐，就让servlet与后端Java文件进行交互，java文件再操作数据库。这里需要注意servlet线程不安全，属于单例模式，所以不可以使用全局变量

后端servlet代码

```package qcby.web.db;

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 QcbyLearn
 */
@WebServlet("/QcbyLearn")
public class QcbyLearn extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public QcbyLearn() {
        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
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		String sql ="select * from tablet1";
	    String[] col = {"id","usename"};
	    String json = MysqlUtil.getJsonBySql(sql,col);
		
		response.getWriter().append(json);
	}

}

代码很简单就是简单的doget还有dopost，这里可以用阿贾克斯算法

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前后端交互</title>
</head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>

<body> 
<div id="divfordata" style="width:80%;">

</div> 
<div id="pageDivqcby" ></div>    
</body>
<script type="text/javascript">
     getData();
     function getData(){
    	 
    	 $.ajax({
		        type: "post",
		        url: "/WebLearn1117/QcbyLearn",
		        data: {},
		        cache: false,
		        async : false,
		      //  dataType: "JSON",
		        success: function (data ,textStatus, jqXHR)
		        {
		        	for(var i = 0; i < data.data.length; i++){
		        		console.info(data.data[i][0] + "|" + data.data[i][1]);
		        	}
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown) {      
		           
		            alert(typeof(errorThrown));
		        }
		     });
     }
    
</script>
</html>

后端java代码连接数据库

package qcby.web.db;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {
		String driver = "com.mysql.jdbc.Driver";
	  //  String url= "jdbc:mysql://127.0.0.1:3306/qcby0908?useUnicode=true&characterEncoding=utf-8";
		String url= "jdbc:mysql://127.0.0.1:3306/zcnb?useUnicode=true&characterEncoding=utf-8";
		   
		String user = "root";
	    String password = "204752";
	    
	    public Connection conn;

	    public DBConnection() {

	        try {
	            Class.forName(driver);
	            conn = (Connection) DriverManager.getConnection(url, user, password);
	            
	            if(!conn.isClosed())
	                System.out.println("Succeeded connecting to the Database!"); 
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
	    }
	    
	    public void close() {
	        try {
	            this.conn.close();
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
	    }

}

这种简单的前后端交互，可以做文档在线编辑，或者是做一个登录注册界面。可以仿照上面代码试一试。