Java AJAX加载图片

最新推荐文章于 2021-10-14 21:10:29 发布

原创最新推荐文章于 2021-10-14 21:10:29 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Java ajax

Java 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的使用Ajax加载图片的例子，通过jQuery发起GET请求到后端控制器，而后端定义了处理Ajax请求的方法，但未实现具体逻辑。前端部分展示了如何在接收到数据后更新图片的src属性。

业务需求：打开网站主页，ajax直接加载相应图片

导入js：jquery-1.8.3.js

后台controller代码：这里定义controller主要是为了定义ajax中的url

package com.mvc.control;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {

@RequestMapping("index")

public String index(){
return "index";
}

@RequestMapping(value="Ajax")
public void Ind(HttpServletResponse response) {}

}

前台index.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%  String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$.ajax({
type : "get",
url : "Ajax",
data : {

},
beforeSend : function(XMLHttpRequest) {
//设置图片为可见
$('#myimg').show();
},

success : function(data, textStatus) {

$("#yuxiaoyu").attr("src","../***.jpg");         
},
complete : function(XMLHttpRequest, textStatus) {
},
error : function() {
alert("出现了一个未知错误");
}
});
});
});

</script>
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<img id="yuxiaoyu">

</tr>
</table>


</body>
</html>