Java后端学习速成Ajax和JSON

阳光穿透心脏的1/2处 2021-09-24 00:54 361阅读 0赞

# 前言： #

由于Java后端学习者通常对于前端的技术不太熟练，，，本篇文章旨在针对Java后端学习者快速掌握简单的ajax请求和json数据使用而写。

如有不当，轻喷。

# 介绍： #

**JSON：**JSON(JavaScript Object Notation, JS对象标记)是-种轻量级的数据交换格式,用于存储和表示数据。在JS语言中，一切都是对象。因此，任何JS支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。

**Ajax：**Ajax 即“**A***synchronous ***J***avascript **A**nd ***X***ML*”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

# JSON使用 #

看看他的要求和语法格式:

●对象表示为键值对  
●数据由逗号分隔  
●花括号保存对象  
●方括号保存数组

JSON键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号"包裹，使用冒号:分隔，然后紧接着值。

{"name": "QinJiang"}
    {"age": "3"}
    {"sex": "男"}

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
    var json = '{"a": "Hello", "b": "World"}'; //这是一个JSON字符串，本质是一个字符串

**JSON和JS对象互转**  
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法:

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是{a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法:

var json = JSON. stringify({a: 'Hello', b: 'World'}); //结果是' {"a": "Hello", "b": "World"}'

ssm项目中使用json需要导包，通常用jackson，jar包为 jackson-annotations.jar，jackson-core.jar，jackson-databind.jar。

通常json也被用于前后端的数据传递，Java后台将返回的数据转换为json的代码如下。更多的使用请看Ajax。

@RequestMapping("/ajaxTest")
    	@ResponseBody    //使用@ResponseBody注解，spring会自动将返回的值转换为json格式的数据，需导入jackson jar包
    	public List<User> ajaxTest() {
    		
            //伪造数据
    		List<User> list = new ArrayList<User>();
    		User user = new User();
    		User user1 = new User();
    		
    		user.setUsername("kk");
    		user.setPassword("123");
    		user1.setUsername("康康");
    		user1.setPassword("456");
    		
    		list.add(user);
    		list.add(user1);
    		
    		//由于加了@ResponseBody注解，默认返回一个json格式的字符串
    		return list;
    	}

# AJAX使用： #

这里使用的是jquery提供的方法，jquery是前端的一个框架，就是一个JavaScript库，里面有许多封装好的方法，直接调用即可。

使用jquery需要下载jquery文件，百度jquery官网即可下载，[jquery官网][jquery]，选择这两个中的一个下载即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

然后只需导入项目中即可使用，

![2020031414435494.png][]

jsp文件需要导入

![20200314150027935.png][]

jquery ajax的方法有get，post和ajax。get方法就是以get方式提交，post方法就是以post方式提交，ajax默认以get方式提交，这个方法比较通用，一般使用ajax方法。

jquery.get(...)
    
        所有参数：
    
        url：待载入页面的url地址
    
        data：待发送的key/value参数
    
        success：载入成功时的回调函数
    
        dataType：返回的内容格式，xml，json，script，text，html
    
    jquery.post(...)
    
        所有参数：
    
        url：待载入页面的url地址
    
        data：待发送的key/value参数
    
        success：载入成功时的回调函数
    
        dataType：返回的内容格式，xml，json，script，text，html
    
    jquery.ajax(...)
    
        主要参数：
    
        url：待载入页面的url地址
    
        data：待发送的key/value参数
    
        success：载入成功时的回调函数
    
        dataType：返回的内容格式，xml，json，script，text，html

了解了方法，就可以开始编写ajax请求了，代码如下

index.jsp

<html>
    <head>
    
    <script src="js/jquery-2.1.4.min.js"></script>
    </head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <body>
        
    	name:<input type="text" id="name" ><br/>
        
    	ajax请求:<input type="button" id="btn" value="发送请求"><br/>
        
    	<table width="50%" align="center">
    		<tr>
    			<td>username</td>
    			<td>password</td>
    		</tr>
    		<tbody id="context">
    		</tbody>
    	</table>
    
    <script type="text/javascript">
    	$(function (){
            //通过按钮点击触发事件，进入ajax请求
    		$("#btn").click(function () {
    			 // url：待载入页面的url地址
    			 // data：待发送的key/value参数，json格式，非必需
    			 // success：载入成功时的回调函数
    			 //		data: 封装了服务器返回的数据
    			$.ajax({
    				url:'${pageContext.request.contextPath}/ajaxTest',
    				data:{"name":$("#name").val()},
    				success:function (data){
    					var html = "";    //将后台传来的数据拼接入HTML代码
    					for(var i=0;i<data.length;i++){
    						html += "<tr>"
    							 + "<td>" + data[i].username + "</td>"
    							 + "<td>" + data[i].password + "</td>"
    							 + "</tr>";
    					}
    					$("#context").html(html);    //加入到tbody中
    				}
    			});
    		})
    	})
    </script>
    </body>
    </html>

controller层代码

@RequestMapping("/ajaxTest")
    	@ResponseBody
    	public List<User> ajaxTest(String name) {
    		
    		//输出从前端传来的值name
    		System.out.println(name);
    		
            //伪造数据
    		List<User> list = new ArrayList<User>();
    		User user = new User();
    		User user1 = new User();
    		
    		user.setUsername("kk");
    		user.setPassword("123");
    		user1.setUsername("康康");
    		user1.setPassword("456");
    		
    		list.add(user);
    		list.add(user1);
    		
    		//由于加了@ResponseBody注解，默认返回一个json格式的字符串
    		return list;
    	}

# 运行结果 #

indes.jsp

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1][]

点击发送请求，传递name的值并获取后台数据，后台数据被动态加载到前端，并且页面不会进行刷新。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 2][]

name的值被后台获取并输出

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 3][]

# Ajax总结  #

使用jQuery需要导入jQuery文件，也可以原生实现。  
1.编写对应处理的Controller ,返回消息或者字符串或者json格式的数据；  
2.编写ajax请求；  
   url : Controller请求  
   data :键值对  
   success:回调函数(使用回调函数必须返回数据，如不需要可返回"")  
3.给Ajax绑定事件,点击.click, 失去焦点onblur, 键盘弹起keyup。

[jquery]: https://jquery.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/f96aaa29cda4424981dc0a8ea44546df.png
[2020031414435494.png]: /images/20210923/351cd16cd6cd4b6e9e4ac4fd4bb2f609.png
[20200314150027935.png]: /images/20210923/03b1452abee0494ea416bbee046eda15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1]: /images/20210923/9bb6acb2ba1c4682b35bcb79f3979061.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 2]: /images/20210923/5b9d45063ec84edd8e6c82d3433254b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 3]: /images/20210923/d94867a49a3d4f6294f97485d3a4a967.png