zoukankan      html  css  js  c++  java
  • Java语言实现通过Ajax抓取后台数据及图片

     

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

    运行效果:

     

  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/zhangyongl/p/6223930.html
Copyright © 2011-2022 走看看