欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

暑期实习Day9---AJAX,JSON,Spring

程序员文章站 2023-12-23 08:31:46
SpringMVCAJAX简述同步 发送请求到服务器–>等待服务器处理完并对页面进行响应异步 发送请求到服务器–>不等待 服务器处理完后根据请求信息返回响应结果–>回调函数处理响应信息js实践触发异步请求创建XMLHttpRequest对象设置请求信息指定回调函数（处理异步返回的响应信息）发送请求表单、a标签 请求服务器 有刷新js ajax 异步请求服务 无刷新 当前页面局部刷新模拟实现过程这里展示一个用js模拟的异步请求

SpringMVC

AJAX

简述

同步 发送请求到服务器–>等待服务器处理完并对页面进行响应

异步 发送请求到服务器–>不等待 服务器处理完后根据请求信息返回响应结果–>回调函数处理响应信息

  1. js实践触发异步请求
  2. 创建XMLHttpRequest对象
  3. 设置请求信息
  4. 指定回调函数（处理异步返回的响应信息）
  5. 发送请求
  • 表单、a标签 请求服务器 有刷新
  • js ajax 异步请求服务 无刷新 当前页面局部刷新

模拟实现过程

这里展示一个用js模拟的异步请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>请输入要加载的地址：<span id="currentTime"></span> </p>
			<p>
				<input type="text" name="url" id="url"  />
				<input type="button" value="提交" onclick="loadPage()" />
			</p>
		</div>
		<div>
			<h3>加载页面位置：</h3>
		</div>
		<iframe src="" id="iframePosition" width="100%" height="500px"></iframe>
	</body>
</html>
<script type="text/javascript">
	window.onload = function f(){
		var date = new Date();
		document.getElementById('currentTime').innerText=date.getTime();
	}
	
	
	function loadPage(){
		var targetUrl = document.getElementById('url').value;
		console.log(targetUrl);
		document.getElementById('iframePosition').src=targetUrl;
	}
</script>

所谓的异步请求就是在不刷新网页的状况下获取新的内容，比较常见的应用场景就是百度的输入框输入部分信息会自动向服务器发送请求，在不刷新的状态下为用户返回数据

这里展示的就是在输入框输入网址点击提交后在本页面的部分内容进行更新
暑期实习Day9---AJAX,JSON,Spring

目前都是利用框架进行封装Ajax，课堂所讲的就是利用vue里面的axios

利用异步完善昨天的文件上传

相关说明详见注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片上传</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		
			
		
		<div id="app">
				<!-- @change是当选中内容发生变化就会触发事件 -->
				<input type="file" name="uploadFile" @change="getFile($event)" id="uploadFile"  />
				<br>
				<!-- url会动态的更新 -->
				<img :src="url" width="100px" height="150px" >
				<br>
				<br>
				<!-- 点击后触发文件上传事件 -->
				<button  @click="uploadFile">上传</button>
			
		</div>
		
	</body>
</html>
<script type="text/javascript">
	
	var vue=new Vue({
		el:"#app",
		data:{
			url:"",
			file:null,
			errMsg:"",
			info:null
			
		},
		methods:{
			//获取选中的文件信息
			getFile:function(event){
				
				this.file=event.target.files[0];
				console.log(this.file);

			},
			//调用昨天在后端写好的文件上传方法
			uploadFile:function(){
				//判断文件对象不为空
				if(this.file==null){
					return;
				}
				
				//封装ajax的请求参数成一个表单数据
				let formdata = new FormData();
				//上传文件的数据内容 uploadFile对应后台内容接受参数
				formdata.append("uploadFile",this.file);
				//此处是异步请求所以提交设置为false
				formdata.append("submit",false);
				console.log(formdata);
				
				//封装配置信息
				const config={
					//说明提交的是一个表单数据
					headers:{"Content-Type":"multipart/form-data"}
				}
				
				//利用vue中的axios进行异步请求
				 axios
				     .post('http://localhost:8080/upload.do', formdata,config)
				     .then(response => {
						 console.log(response);
						 if(response.data.result=='true'){//成功更新url，使得上面的img拥有图片来源
							 this.url=response.data.url;
						 }
						 else{
							 this.errMsg=response.data.errMsg;
						 }
					 })
				     .catch(function (error) { // 请求失败处理
				       console.log(error);
				     });
					
			}
		}
	})
	
</script>

JSON数据交互

上述Ajax的几个案例实际上已经完成了JSON数据的交互，这里记录这一完整过程
暑期实习Day9---AJAX,JSON,Spring

1.前端向服务器发出请求（此处利用vue使用今天学习的异步请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>products</title>
	<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
	
	<div id="app">
				<table class="table table-condensed  table-responsive table-hover">
					<tr>
						<td>编号</td>
						<td>商品名称</td>
						<td>单价</td>
					</tr>
					<tr v-for="product in products">
						<td>{{product.id}}</td>
						<td>{{product.name}}</td>
						<td>{{product.price}}</td>
					</tr>
				</table>
				<div>{{products}}</div>
				<button @click="getProducts">异步获取数据</button>
			</div>

</body>
</html>
<script>
var vue=new Vue({
	el:"#app",
	data:{
		info:null,
		products:null
	},
	methods:{
		getProducts:function(){
		  axios//向服务器发出get请求  无数据传入
		      .get('http://localhost:8080/product/all4.do')
            //得到服务器端传回的JSON数据对页面进行相关的渲染
		      .then(response => (this.info=response,this.products=response.data.products))
		      .catch(function (error) { // 请求失败处理
		        console.log(error);
		      });
		}
	}
})
</script>

2.后台管理端

@RequestMapping("/all4.do")
    public @ResponseBody String getProduct4(){
        ArrayList<EasybuyProduct> products = new ArrayList<>();
        products.add(new EasybuyProduct(1,"康师傅矿泉水",1.0f));
        products.add(new EasybuyProduct(2,"百岁山",3.5f));
        products.add(new EasybuyProduct(3,"00003",2.0f));

        //将数据放到请求对象中
        JSONObject json=new JSONObject();
        json.put("products",products);
        
        return json.toJSONString();

    }

3.前端得到从服务器传回的JSON数据，对页面进行相关渲染暑期实习Day9---AJAX,JSON,Spring

Spring

项目目标：

高内聚，低耦合

三层结构

暑期实习Day9---AJAX,JSON,Spring

  • controller 界面控制层
  • service 业务层
  • dao 数据层
  • pojo 实体层

IOC 控制反转

传统方法

dao

public class ProductDao{
   
    public int add(EasybuyProduct product) {
        
        System.out.println("ProductDao正在访问数据库。。。");
        return 0;
    }
}

service

public int add(EasybuyProduct product){
        //有需求就在此进行数据加工对商品信息
        //无需求就直接使用dao即可
        ProductDao dao=new ProductDao();

        System.out.println("ProduceService: 业务逻辑层正在处理数据。。。");

        return dao.add(product);
    }

controller

@Controller
@RequestMapping("/product")
public class ProductController {
   
    @RequestMapping("/add")
    public @ResponseBody String addProduct(Integer pid, String name,float price){
        //取调转
        //1.取表单或url参数
        EasybuyProduct product= new EasybuyProduct(pid,name,price);
        //2.调用业务逻辑层       这里就产生的耦合
        ProductService service = new ProductService();
        int rs = service.add(product);

        //3.跳转页面或者返回JSON数据
        return rs+"";

    }
}

可以看到上述的三层类似于下图产生了耦合
暑期实习Day9---AJAX,JSON,Spring

这样的耦合会带来什么问题?

假设现在用户的需求发生了改变，也就是说service层发生了变化，我们需要根据新的需求写新的service类，最理想的状态就是我们只写这个新的service，其他什么都不做。但是现在不可以，我们还需要在控制层注释掉原有的service类的调用部分，重新将新的service new出来，再调用相关方法实现。现在我们的代码仅仅是为了模拟这一过程编写的十分简单，如果是一个大型项目，这些工作量就十分庞大，而且如果耦合程度过高，极易因为漏掉某处而出现重大的错误。这就是耦合带来的问题，而Spring IOC就帮我们解决了这个问题。

使用接口虽然在一定程度上减少了修改代码的工作量，但没有在根本上解决问题

Spring IOC

dao

//@Repository 是专门用于对DAO实现类进行标注   等效于@Component
@Repository("productDao")
public class ProductDao_Imp implements ProductDao{
    @Override
    public int add(EasybuyProduct product) {
        System.out.println("ProductDao正在访问数据库。。。");
        return 0;
    }
}

service

//@Service  专门用于对Service类进行标注   等效于@Component
@Service("productService")
public class ProductService_Imp implements ProductService {
	//自动注入
    @Autowired//这里只需要定义DAO层的接口 new实现类的过程spring在底层帮我们做好了
    private ProductDao productDao;

    @Override
    public int add(EasybuyProduct product) {
        System.out.println("ProduceService: 业务逻辑层正在处理数据。。。");
        //这里就可以直接调用方法
        return productDao.add(product);
    }

    @Override
    public int update(EasybuyProduct product) {
        return 0;
    }
}

controller

@Controller
@RequestMapping("/product")
public class ProductController {
    //声明接口,自动注入
    @Autowired
    private ProductService productService;

    @RequestMapping("/add")
    public @ResponseBody String addProduct(Integer pid, String name,float price){
        //取调转
        //1.取表单或url参数
        EasybuyProduct product= new EasybuyProduct(pid,name,price);
        //2.调用业务逻辑层      
        
        int rs = productService.add(product);
        //3.跳转页面或者返回JSON数据
        return rs+"";


    }
}

现在我们再来看看之前的问题

新需求—>通过接口实现新的service—>注释掉原有的@Service注解—>问题解决

AOP 面向切面

  • 纵向切面上去看整个项目

本文地址：https://blog.csdn.net/qq_45028113/article/details/107388087

相关标签： 暑期实习

上一篇：

下一篇：

推荐阅读