ajax 刷新图片,实现ajax图片的刷新

直接上代码:

这里我使用mybatis框架的逆反工程:

所以我这里省略了pojo dao 以及 dao的对应接口

需要util工具(也可以自己写):

packagecn.util;importorg.apache.ibatis.io.Resources;importorg.apache.ibatis.session.SqlSession;importorg.apache.ibatis.session.SqlSessionFactory;importorg.apache.ibatis.session.SqlSessionFactoryBuilder;importjava.io.IOException;importjava.io.InputStream;public classMyBatisUtil {private staticSqlSessionFactory factory;static{//在静态代码块下，factory只会被创建一次

System.out.println("static factory===============");try{

InputStream is= Resources.getResourceAsStream("mybatis-config.xml");

factory= newSqlSessionFactoryBuilder().build(is);

}catch(IOException e) {//TODO Auto-generated catch block

e.printStackTrace();

}

}public staticSqlSession createSqlSession(){return factory.openSession(false);//true 为自动提交事务

}public static voidcloseSqlSession(SqlSession sqlSession){if(null !=sqlSession)

sqlSession.close();

}

}

MybatisUtil

Service层:

packagecn.service;importcn.pojo.Img;importjava.util.List;public interfaceImgMapperService {

ListselectAll();

}

ServiceDao.interface

packagecn.service;importcn.dao.ImgMapper;importcn.pojo.Img;importcn.util.MyBatisUtil;importorg.apache.ibatis.session.SqlSession;importjava.util.List;public class ImgMapperServiceImpl implementsImgMapperService {private static final SqlSession sqlSession =MyBatisUtil.createSqlSession();private static final ImgMapper mapper = sqlSession.getMapper(ImgMapper.class);public ListselectAll() {

List imgs =mapper.selectAll();returnimgs;

}

}

ServiceImpl.class

Servlet层:

packagecn.servlet;importcn.dao.ImgMapper;importcn.pojo.Img;importcn.service.ImgMapperService;importcn.service.ImgMapperServiceImpl;importcn.util.MyBatisUtil;importcom.google.gson.Gson;importorg.apache.ibatis.session.SqlSession;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.util.List;

@WebServlet("/Servlet01")public class Servlet01 extendsHttpServlet {

ImgMapperService imgMapperService= newImgMapperServiceImpl();

@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {

resp.setContentType("text/html;charset=UTF-8");

Gson gson= newGson();

List imgs =imgMapperService.selectAll();

System.out.println(gson.toJson(imgs));

resp.getWriter().println(gson.toJson(imgs));

}

@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {super.doPost(req, resp);

}

}

Servlet

Web方面： 需要准备 img 以及路径

index.jsp:

User: admin

Date:2019/10/27Time:21:40To changethis template use File | Settings |File Templates.--%>

测试

--%>

$(function () {

$("#bto1").click(function () {

alert("aaa")

$("#bto1").remove();

$.ajax({

type:"Get",

dataType:"json",

url:"Servlet01",

data:"userName="+Math.random(),

success: function(data){

$.each(data,function (i,val) {//alert(data[i].url)

$("#b").html(data[i].url)

})

},

error: function(msg){

alert("请联系客户")

}

})

})

})

width: 340px;

height: 340px;

display: flex;

border-radius: 50%;

align-items: center;

justify-content: center;

overflow: hidden;

}

index.jsp

注意： 这里的图片经常在加载时会出错，所以最好先弄一个jsp文件然后把图片测试一遍

正确的路径存入数据库:

数据库: