实现ajax图片的刷新

Posted chenbicheng528

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现ajax图片的刷新相关的知识，希望对你有一定的参考价值。

 

 

 

直接上代码:

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

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

需要util工具（也可以自己写）:

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层:

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 以及路径

index.jsp:

<%--
  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文件然后把图片测试一遍

正确的路径存入数据库:

数据库:

 

以上是关于实现ajax图片的刷新的主要内容，如果未能解决你的问题，请参考以下文章

Ajax实现异步上传图片

基于THINKPHP+layui+Ajax无刷新实现图片上传预览

HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

微信授权页面执行ajax不执行，刷新才能执行

ASP.NET 用AJAX在页面上传头像，不能异步刷新？