Java实现使用Ajax异步请求完成请求后台数据并且解析返回的Json数据demo

电玩女神 2021-12-24 00:15 391阅读 0赞

#### 前言：本篇就是简单说了一下前后台交互的一种方式，适用于小白。 ####

#### 1、简单介绍一下Ajax（Asynchronous JavaScript and XML）异步请求： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70]  
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

#### 2、简单介绍一下Json数据： ####

JSON(JavaScriptObject Notation JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。  
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中运用js使用该数据渲染出页面。

#### 3、本篇demo的简单介绍： ####

前台：html+jquery+ajax  
后台：Java+Servlet  
Ide：Myeclipse  
jdk：1.7以上  
简述：前台为普通的html页面，使用ajax发起一个get请求到后台，后台返回提前拼接好的json数据

#### 4、前台代码如下： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 1]  
4.1、index.html的代码（jquery的扩展自己去百度下载一个就好记住改index.html的引用）：

<!DOCTYPE html>
    <html>
      <head>
        <title>解析json数据</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        
      <script src="jquery-1.8.2.min.js"></script>
      </head>
      
      <body>
    	<input id="xuan" type="button" value="获取解析json数据">
        <table id="ta" cellspacing="0" border="1px solid" style="border-color:red;">
        	<tr>
    			<td>name</td>
    			<td>age</td>
        	</tr>
        	
        </table>
      </body>   
    
      <script>
    	$(function(){
    		$("#xuan").click(function(){
    			$.ajax({
    				//这个url根据你自己的环境去改一下就行了
    				url:"http://127.0.0.1:8080/AjaxAndJsonTest/alldata",
    				data:"",
    				Type:"get",
    				dataType:"json",
    				success:function(res){
    					//组装第一个取出数据组装网页html标签元素
    					var td1 = $("<td>"+res.name+"</td>")
    					//组装第二个td
    					var td2 = $("<td>"+res.age+"</td>")
    					//组装tr
    					var tr = $("<tr></tr>");
    					//把td表格追加到tr的子元素后面
    					$(tr).append(td1).append(td2);
    					//追加到table子元素后面
    					$("#ta").append(tr);
    				},
    				error:function(err){
    					alert(err)
    				}
    			})
    		})
    	})
      </script>
      </html>

#### 5、后台代码如下： ####

5.1、点击下方链接去下载项目（导入是web项目哦！别导错了！）：  
链接：https://pan.baidu.com/s/1rS5vLkfKSlMMQ5vhlrNlsA  
提取码：yu5p  
5.2、代码主要逻辑如下图所示（具体点上方下载链接并且导入进去仔细看逻辑都有注释的）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 2]

#### 6、效果如下： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 3]

#### 7、遇到困难可以评论（有信必回）小轩微信号tangchenxuan1999 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70]: /images/20211223/592eb92602e148b4b63bcaf1c81bbc91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 1]: /images/20211223/e0055237d5d04b0e9b31e9f79d270002.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 2]: /images/20211223/c4b32c67b37d46f6b5b88bb442e7ed77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 3]: /images/20211223/797091397469441bb78cb2e9ee9055ab.png