你这个前端如何调用java程序前端调用后端接口代码

转载

mob64ca1414098d 2024-03-02 09:46:22

文章标签 你这个前端如何调用java程序 ajax java html 数据 文章分类 Java 后端开发

一、AJAX

前端代码：

后端主要代码：

二、处理返回的数据

前端代码：

前端CSS：

后端代码：

一、AJAX

AJAX，一种在网页上调用后台接口的方式

后台接口：指后台代码实现的服务

jQuery里提供了AJAX调用的方法

演示：

你这个前端如何调用java程序前端调用后端接口代码_java

前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div class="main">
			<button onclick="query()">查询</button>
		</div>
	</body>
	<script>
		function query()
		{
			$.ajax({
				type:'Get',                /*请求类型GET/POST*/
				url:'TestQuery',          /*服务URL,用相对地址*/
				dataType:"json",         /*期望服务器返回的数据类型*/
				success:function(reap)  /*reap：返回的数据对象，已经将服务器返回的数据转成JS对象*/
				{
					console.log(reap);
				}
			});
		}
	</script>
</html>

后端主要代码：

package my;

import java.io.IOException;
import java.util.List;

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

import org.json.JSONArray;

/**
 * Servlet implementation class TestQuery
 */
@WebServlet("/TestQuery")
public class TestQuery extends HttpServlet 
{

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
												throws ServletException, IOException 
	{

		//根据from/to进行查询
		List<Student>rows =DemoDB.i.list();
		
		JSONArray jary = new JSONArray(rows);
		
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/plain");
		
		response.getWriter().write(jary.toString(2));
		
	}
}

其中：

-$.ajax({...参数...})等同于jQuery.ajax({...参数...})

-参数里面是一个JS对象

对象的属性：

type : 'GET'

url : 接口地址，使用相对地址

success : 当服务器返回应答时，调用其function处理（回调方法）

二、处理返回的数据

点击查询按钮后，显示如下

你这个前端如何调用java程序前端调用后端接口代码_数据_02

前端代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Text.html</title>
    
   <meta charset="utf-8">

	<link rel="stylesheet" href="css/common.css"/> 
    <script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	
	<style>
		body{
			background-color: #F0F8FF;
		}
		/*主面板*/
		.main{
			width: 800px;
			margin: 20px auto;
			background-color: antiquewhite;
			min-height: 400px;
			padding: 10px;
			position: relative;
		}
		/*工具按钮区*/
		.main .toobar{
			margin: 10px 0px;
		}
		/*数据区*/
		.main .content{
			width: 400px;
			position: absolute;
			left: 200px;
			top: 50px;
			
		}
		/*无数据时的显示*/
		.main .content .empty{
			text-align: center;
			padding: 4px;
			display: block;
			border: 0px solid #888;
			border-width: 0px 1px 1px 1px;
		}
		/*列宽指定*/
		.main .table .c1{width: 80px;}
		.main .table .c2{width: 80px;}
		.main .table .c3{width: 80px;}
		.main .table .c4{width: 180px;}
	</style>

  </head>
  
  <body>
   <div class="main">
   		<button class="toobar" onclick="query()">查询</button>
		<div class="content">
			<table class="table">
				<thead>
					<th class="c1"> 学号 </th>
					<th class="c2"> 姓名</th>
					<th class="c3"> 性别 </th>
					<th class="c4"> 手机号 </th>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<!--没有数据时显示这个-->
			<div class="empty">
				暂无数据
			</div>
		</div>
   </div>
  </body>
  <script>
  		function query()
  		{
  			$.ajax({
				type:'GET',                   /*请求类型GET/POST*/
				url:'TestQuery',              /*服务URL，用相对地址*/
				dataType:"json",            /*期望服务器返回的数据类型*/
				success:function(resp){    /*已经将服务器返回的数据转成JS对象*/
					 console.log(resp); 
					showResult(resp);
				}
			}); 
  		}
		
		function showResult(result)
		{
			var target = $(".main .content tbody")
			target.html("");  //清空
			for(var row of result)
			{
				var str ="<tr>"
				+"<td>" + row.id +"</td>"
				+"<td>" + row.name +"</td>"
				+"<td>" + (row.sex?"男":"女") +"</td>"
				+"<td>" + row.phone +"</td>"
				+"</tr>"
				;
				target.append(str);
			}
			
			//如果没有数据,则把下面的显示出来
			if(result.length>0)
				$(".main .content .empty").hide();
			else
				$(".main .content .empty").show();
			
		}
  </script>
</html>

三、参数查询

你这个前端如何调用java程序前端调用后端接口代码_java_03

前端代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Text.html</title>
    
   <meta charset="utf-8">

	<link rel="stylesheet" href="css/common.css"/> 
    <script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	
	<style>
		body{
			background-color: #F0F8FF;
		}
		/*主面板*/
		.main{
			width: 800px;
			margin: 20px auto;
			background-color: antiquewhite;
			min-height: 400px;
			padding: 10px;
			position: relative;
		}
		/*工具按钮区*/
		.main .toobar{
			margin: 10px 0px;
			text-align: center;
		}
		/*数据区*/
		.main .content{
			width: 400px;
			position: absolute;
			left: 200px;
			top: 80px;
			
		}
		/*无数据时的显示*/
		.main .content .empty{
			text-align: center;
			padding: 4px;
			display: block;
			border: 0px solid #888;
			border-width: 0px 1px 1px 1px;
		}
		/*列宽指定*/
		.main .table .c1{width: 80px;}
		.main .table .c2{width: 80px;}
		.main .table .c3{width: 80px;}
		.main .table .c4{width: 180px;}
	</style>

  </head>
  
  <body>
   <div class="main">
	   <div class="toobar">
		   <!--输入查询条件-->
		   <input type="text" class="from" placeholder="开始学号" />---
		   <input type="text" class="to" placeholder="结束学号" />
		   <button class="toobar" onclick="query()">查询</button>
	   </div>
   		
		<div class="content">
			<table class="table">
				<thead>
					<th class="c1"> 学号 </th>
					<th class="c2"> 姓名</th>
					<th class="c3"> 性别 </th>
					<th class="c4"> 手机号 </th>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<!--没有数据时显示这个-->
			<div class="empty">
				暂无数据
			</div>
		</div>
   </div>
  </body>
  <script>

	  
  		function query()
  		{
			
			/*请求参数*/
			var req = {};
			req.from =$(".toobar .from").val().trim();
			req.to = $(".toobar .to").val().trim();
			
			console.log(req.from);
  			$.ajax({
				type:'GET',                   /*请求类型GET/POST*/
				url:'TestQuery',              /*服务URL，用相对地址*/
				dataType:"json",            /*期望服务器返回的数据类型*/
				data:req,                  /*附加请求参数*/
				success:function(resp){    /*已经将	服务器返回的数据转成JS对象*/
					 console.log(resp); 
					showResult(resp);
				}
			}); 
  		}
		
		function showResult(result)
		{
			var target = $(".main .content tbody")
			target.html("");  //清空
			for(var row of result)
			{
				var str ="<tr>"
				+"<td>" + row.id +"</td>"
				+"<td>" + row.name +"</td>"
				+"<td>" + (row.sex?"男":"女") +"</td>"
				+"<td>" + row.phone +"</td>"
				+"</tr>"
				;
				target.append(str);
			}
			
			//如果没有数据,则把下面的显示出来
			if(result.length>0)
				$(".main .content .empty").hide();
			else
				$(".main .content .empty").show();
			
		}
  </script>
</html>

前端CSS：

body{
	margin: 0px;
	padding: 0px;
}

/* 表格样式 */
table{
	border-collapse: collapse; /* 边线收缩 */
	table-layout: fixed ;  /* 自动布局还是固定宽度 */
	word-break: break-all; /* 换行设定 */
	word-wrap:break-word;  /* 换行折断设定 */
}

/* 逗号表示同时指定多个目标的样式 */
table,td,th{
	border: 1px solid #888;
	text-align: center;
}


/* 一行 */
.row{
	margin: 10px 0px;
}

后端代码：

package my;

import java.io.IOException;
import java.util.List;

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

import org.json.JSONArray;

/**
 * Servlet implementation class TestQuery
 */
@WebServlet("/TestQuery")
public class TestQuery extends HttpServlet 
{

	/**
	 * @see HttpServlet#doGet(

HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
												throws ServletException, IOException 
	{
		
		String fromStr = request.getParameter("from");

		
		String toStr = request.getParameter("to");
		
		int from = Integer.valueOf(fromStr);
		int to = Integer.valueOf(toStr);
		
		//根据from/to进行查询
		List<Student>rows =DemoDB.i.list(from, to);
		
		JSONArray jary = new JSONArray(rows);
		
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/plain");
		
		response.getWriter().write(jary.toString(2));
		
	}
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。