實現ajax圖片的刷新

時間 2019-11-11

標籤實現 ajax 圖片刷新欄目 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>