Java语言实现通过Ajax抓取后台数据及图片

zhangyongl

 

1.Java语言实现通过Ajax抓取后台数据及图片信息

1.1数据库设计：

create table picture(
   pic_id number not null,
   pic_name varchar(200)not null,
   pic_url varchar2(200) not null,
   pic_descp varchar2(200) not null,
   pic_price varchar2(200) not null
)

insert into picture values(1 ,\'小米5s Plus\',\'img/1.png\',\'5.7英寸大屏双摄手机，拍照黑科技\' ,\'79元\');
insert into picture values(2 ,\'红米手机4\',\'img/2.png\',\'12月27日早10点开售\' ,\'699元起\');
insert into picture values(3 ,\'小米电视3s 48英寸\',\'img/3.png\',\'原装液晶屏，金属机身\' ,\'1999元\');
insert into picture values(4 ,\'小米平板2 16GB现货\',\'img/4.png\',\'轻薄全金属，海量内容\' ,\'999元\');
insert into picture values(5 ,\'小米盒子3s\',\'img/5.png\',\'人工智能机顶盒，2GB+8GB 大存储\' ,\'299元\');
insert into picture values(6 ,\'小米移动电源2\',\'img/6.png\',\'双向快充，高密度锂聚合物电芯\' ,\'79元\');
insert into picture values(7 ,\'米家扫地机器人\',\'img/7.png\',\'远程智能控制，扫得干净扫得快\' ,\'1699元\');
insert into picture values(8 ,\'米家恒温电水壶\',\'img/8.png\',\'快速沸腾，水温智能控制\' ,\'299元\');
insert into picture values(9 ,\'小米净水器 厨上式\',\'img/9.png\',\'RO反渗透直出纯净水\' ,\'1299元\');
insert into picture values(10 ,\'小米手环 2\',\'img/10.png\',\'OLED 显示屏幕，升级计步算法\' ,\'149元\');

select * from picture;

 运行效果：

1.2 新建一个JavaWeb项目

1.2.1 添加项目说需要的包  即连接数据库的ojdbc的jar包

1.2.2编写连接数据库的工具类

package org.user.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBUtil {
    private static String driver="oracle.jdbc.driver.OracleDriver";
    private static String url="jdbc:oracle:thin:@localhost:1521:orcl";
    private static String user="yongl";
    private static String passwd="121314";
    public static Connection getConnection() {
        try {
            Class.forName(driver);
            return DriverManager.getConnection(url, user, passwd);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
    public static void closeConn(Connection conn,Statement stm , ResultSet rs ) {

        if(stm!=null){
            try {
                stm.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(rs!=null){
            try{
                rs.close();
            }catch(SQLException e){
                e.printStackTrace();
            }
        }
    }
    public static void main(String[] args) {

        System.out.println(getConnection());
    }
}
View Code

 运行效果：

连接成功。

1.2.3编写字符串转化为json的的工具类

package org.picture.util;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class GsonUtil {

    public static String toJson(Object obj){
        return new Gson().toJson(obj);
    } 
    
    public static String toJson(Object obj, String dateFormat){
        GsonBuilder builder = new GsonBuilder();
        Gson gson = builder.setDateFormat("yyyy-MM-dd").create();
        return gson.toJson(obj);
        
    } 
}

 

1.2.4 编写实体类

package org.picture.entity;

public class Entity {
    private int id;
    private String name;
    private String url;
    private String descp;
    private String price;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getDescp() {
        return descp;
    }
    public void setDescp(String descp) {
        this.descp = descp;
    }
    public String getPrice() {
        return price;
    }
    public void setPrice(String price) {
        this.price = price;
    }
    @Override
    public String toString() {
        return "Entity [id=" + id + ", name=" + name + ", url=" + url + ", descp=" + descp + ", price=" + price + "]";
    }
     
    
    
}

1.2.5 编写dao方法

package org.picture.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.junit.Test;
import org.picture.entity.Entity;
import org.picture.util.DBUtil;

public class Dao {
    //查询所有picture的所有信息
    public List<Entity> findPicture(){
        String sql="select * from picture";
        Connection conn = DBUtil.getConnection();
        ResultSet rs= null;
        PreparedStatement ps=null;
        List<Entity> list = new ArrayList<Entity>();
        try {
            ps = conn.prepareStatement(sql);
            rs=ps.executeQuery();
            while(rs.next()){
                Entity  p= new Entity();
                p.setId(rs.getInt(1));
                p.setName(rs.getString(2));
                p.setUrl(rs.getString(3));
                p.setDescp(rs.getString(4));
                p.setPrice(rs.getString(5));
                list.add(p);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } finally {
            DBUtil.closeConn(conn, ps, rs);
        }
        return list;
    }
    @Test
    public void test(){
        Dao dao = new Dao();
        List<Entity> i=dao.findPicture();
        for (Entity e : i) {
            System.out.println(e);
        }
    }

}

运行效果：

1.2.6 编写servlet

package org.picture.servlet;

import java.io.IOException;
import java.util.List;

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 org.picture.dao.Dao;
import org.picture.entity.Entity;

import com.google.gson.Gson;
 
@WebServlet("/pictureServlet")
public class PictureServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Dao dao = new Dao();
        List<Entity> i=dao.findPicture();
        
        Gson gson = new Gson();
        //在这里转化成json
        String json =gson.toJson(i);
        System.out.println(json);
        
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().println(json);
    }

}

运行效果：

在返回的是json 最终要返回到页面

1.2.7 html页面：

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
    <style type="text/css">
            #book {
                width: 100%;
                position: absolute;
                border:1px red solid;
                display:inline-block;
            }             
             .p1{
                font-size: 16px;
                color: #000;
                font-family: Microsoft YaHei;
            }
             .p2{
                font-size: 14px;
                color: #b0b0b0;
                margin-top:10px;
                font-family: Microsoft YaHei;
            }
             .p3{
                font-size: 16px;
                color: #ff5f19;
                margin-top:10px;
                font-family: Microsoft YaHei;
            }
            .product{
                float:left;
                text-align: center;
                width:19%;
                position: relative;
                margin: 30px 20px 5px 50px;                 
                box-shadow: 0px 10px 10px #adadad;
                height: 330px;
                background: #fafafa;
            }
            .book-img{
                width:100%;
                height:67%;
                margin: 0 0 8px 0;
            }
            .book-img img{
                width:100%;
                height:100%;
            }
        </style>
    <script>
    //页面加载   获取全部信息
        $(function(){
            $.get("pictureServlet",function(result){                
                //result数据添加到表格中; 
                addBox(result);
            });     
        });   
        function addBox(result){
            //result是一个集合,所以需要先遍历
            $.each(result,function(index,obj){
             $("#picture").append("<div class=\'product\'>"+//获得图片地址                     
                    "<div class=\'book-img\'><img src="+obj.url+"></div>"+    
                            //获得商品名字             
                        "<div class=\'p1\'>"+obj.name+"</div>"+
                            //获得商品描述
                        "<div class=\'p2\'>"+obj.descp+"</div>"+
                            //获得商品价格
                        "<div class=\'p3\'>"+obj.price+"</div>"+                         
                   "</div>"); 
            });
        }        
    </script>
</head>
<body>
    <!-- 构建装一个容器 -->     
        <div id="picture">
        </div>     
</body>
</html>

运行效果：

 1.2.8在手机端运行

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
    <style type="text/css">
                          
             .p1{
                font-size: 14px;
                color: #000; 
            }
             .p2{
                font-size: 12px;
                color: #b0b0b0;
            }
             .p3{
                font-size: 14px;
                color: #ff5f19;
            }
            .product{ 
                width:100%;
                position: relative;
                margin: 20px 0 5px 0;             
                height: 100px;
                background: #fafafa; 
            }
            .box-img{
                float:left;
                width:100px;
                height:100%;
                margin: 0 0 8px 0;
            }
            .box-img img{                
                width:100%;
                height:100%;
            }
            .p{
                display:inline-block;
                float:left;
                width:70%;
                margin-top:6px;
                font-family: Microsoft YaHei; 
            }
            .p1{
                 margin-top:16px;
                 }
             
            @media only screen and (max-width: 400px) {
              .p{  
                width:50%;
            }         
            }            
            }
        </style>
    <script>
    //页面加载   获取全部信息
        $(function(){

            $.get("pictureServlet",function(result){                
                //result数据添加到表格中;
                addBox(result);
            });
        });
        function addBox(result){
            //result是一个集合,所以需要先遍历
            $.each(result,function(index,obj){
             $("#box").append("<div class=\'product\'>"+//获得图片地址                     
                    "<div class=\'box-img\'><img src="+obj.url+"></div>"+    
                            //获得商品名字             
                        "<div class=\'p1 p\'>"+obj.name+"</div>"+
                            //获得商品描述
                        "<div class=\'p2 p\'>"+obj.descp+"</div>"+
                            //获得商品价格
                        "<div class=\'p3 p\'>"+obj.price+"</div>"+                         
                   "</div>"); 
            });
        }
    </script>
</head>
<body>
    <!-- 构建装一个容器 -->     
        <div id="box">
        </div>     
</body>
</html>

运行效果：

在手机端运行的时候，一定要注意加上下面一句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 2.1 运行servlet：

3.1运用前端框架【MUI】

 3.1.1，在HBuilder中新建一个Hello 模板项目

　 

3.1.1，在项目中新建一个html文件--Mi.html

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>淘水果</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <style>
        body{
            font-family: "microsoft yahei";
            }
            .title {
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }
            
            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }
            
            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }
            
            .oa-contact-avatar {
                width: 75px;
            }
            
            .oa-contact-avatar img {
                border-radius: 50%;
            }
            
            .oa-contact-content {
                width: 100%;
            }
            
            .oa-contact-name {
                margin-right: 20px;
            }
            
            .oa-contact-name,
            oa-contact-position {
                float: left;
            }
            .img_webp{
                width: 100%;
                height: 100%;
            }
            .boxt{
                width: 100%;
                height: 200px;
            }
            
            
            .p1{
                font-size: 14px;
                color: #000; 
            }
             .p2{
                font-size: 12px;
                color: #b0b0b0;
            }
             .p3{
                font-size: 14px;
                color: #ff5f19;
            }
            .product{ 
                width:100%;
                position: relative;
                margin: 20px 0 5px 0;             
                height: 100px;
                background: #fafafa; 
            }
            .box-img{
                float:left;
                width:100px;
                height:100%;
                margin: 0 0 8px 0;
            }
            .box-img img{                
                width:100%;
                height:100%;
            }
            .p{
                display:inline-block;
                float:left;
                width:70%;
                margin-top:6px; 
            }
            .p1{
                 margin-top:16px;
                 }
             
            @media only screen and (max-width: 400px) {
              .p{  
                width:50%;
            }         
            }            
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">小米商城</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-chat">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-contact">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">购物车</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-map">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </nav>
        <div class="mui-content">
            <div id="tabbar" class="mui-control-content mui-active">

                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-lhttp://127.0.0.1:8020/HTML5_2_1/d06.html#oop">                        
                         <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="images/mo-2.webp" class="img_webp">
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/mo-1.webp" class="img_webp">
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/mo-2.webp" class="img_webp">
                            </a>
                        </div>
                         <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="images/mo-1.webp" class="img_webp">
                            </a>
                        </div>
                  
                    </div>
                    <!--中间那张美女图-->
                     <div class="picture">
                             <img src="images/mo0.webp" class="img_webp">
                    </div>
                </div>

                <!--这个盒子是用来装数据库查出来的商品的-->
                 <div id="box">
                         
                 </div>

            </div>

            <div id="tabbar-with-chat" class="mui-control-content">
                 2
            </div>
            <div id="tabbar-with-contact" class="mui-control-content">
                 3
            </div>
            <div id="tabbar-with-map" class="mui-control-content">
                 4
            </div>
        </div>
    </body>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js"></script>
    <script >
         $(function(){
            $.get("http://localhost:8080/PictureWeb/pictureServlet",function(result){
                //result数据添加到表格中;
                addBox(result);
            });
        });
        function addBox(result){
            //result是一个集合,所以需要先遍历
            $.each(result,function(index,obj){
             $("#box").append("<div class=\'product\'>"+//获得图片地址                     
                    "<div class=\'box-img\'><img src=\'http://localhost:8080/PictureWeb/"+obj.url+"\'></div>"+    
                            //获得商品名字             
                        "<div class=\'p1 p\'>"+obj.name+"</div>"+
                            //获得商品描述
                        "<div class=\'p2 p\'>"+obj.descp+"</div>"+
                            //获得商品价格
                        "<div class=\'p3 p\'>"+obj.price+"</div>"+                         
                   "</div>"); 
            });
        }
    </script>
</html>

运行效果：

 

 

 

 

 

分类：

技术点：

相关文章：

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-06
  • 2022-12-23
  • 2022-12-23
  • 2021-12-12
猜你喜欢
  • 2021-07-16
  • 2022-12-23
  • 2021-12-04
  • 2022-12-23
  • 2022-12-23
  • 2021-12-03
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode