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());
    }
}

 運行效果：

連接成功。

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>

運行效果：