实现ajax图片的刷新

 

 

 

直接上代码:html

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

因此我这里省略了pojo dao 以及 dao的对应接口jquery

须要util工具(也能够本身写):ajax

package cn.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class MyBatisUtil {
    private static SqlSessionFactory factory;
    
    static{//在静态代码块下,factory只会被建立一次
        System.out.println("static factory===============");
        try {
            InputStream is = Resources.getResourceAsStream("mybatis-config.xml");
            factory = new SqlSessionFactoryBuilder().build(is);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 
    }
    
    public static SqlSession createSqlSession(){
        return factory.openSession(false);//true 为自动提交事务
    }
    
    public static void closeSqlSession(SqlSession sqlSession){
        if(null != sqlSession) 
            sqlSession.close();
    }
}
MybatisUtil

 

Service层:sql

package cn.service;

import cn.pojo.Img;

import java.util.List;

public interface ImgMapperService {

    List<Img> selectAll();
}
ServiceDao.interface

 

package cn.service;

import cn.dao.ImgMapper;
import cn.pojo.Img;
import cn.util.MyBatisUtil;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class ImgMapperServiceImpl implements ImgMapperService {

    private static final SqlSession sqlSession = MyBatisUtil.createSqlSession();
    private static final ImgMapper mapper = sqlSession.getMapper(ImgMapper.class);

    public List<Img> selectAll() {
        List<Img> imgs = mapper.selectAll();
        return imgs;
    }
}
ServiceImpl.class

 

Servlet层:数据库

package cn.servlet;


import cn.dao.ImgMapper;
import cn.pojo.Img;
import cn.service.ImgMapperService;
import cn.service.ImgMapperServiceImpl;
import cn.util.MyBatisUtil;
import com.google.gson.Gson;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    ImgMapperService imgMapperService = new ImgMapperServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");

        Gson gson = new Gson();

        List<Img> imgs = imgMapperService.selectAll();
        System.out.println(gson.toJson(imgs));
        resp.getWriter().println(gson.toJson(imgs));
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doPost(req, resp);
    }
}
Servlet

 

Web方面: 须要准备 img 以及路径apache

index.jsp:json

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/10/27
  Time: 21:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试</title>
<%--    <script src="js/jquery.min.js"></script>--%>
    <script src="js/jquery.min.js"></script>
    <script>
        $(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("请联系客户")
                    }
                })
            })

        })
    </script>
    <style>
        .bto1{
                    width: 340px;
                    height: 340px;
                    display: flex;
                    border-radius: 50%;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
        }
    </style>
</head>
<body>


<div id="bto1"class="bto1">
    <img src="img/d2.png" alt="第二张"/>
</div>





<div id="b"class="bto1"></div>
</body>
</html>
index.jsp

 

 

 

 

注意: 这里的图片常常在加载时会出错,因此最好先弄一个jsp文件而后把图片测试一遍session

正确的路径存入数据库:mybatis

数据库:

相关文章
相关标签/搜索