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="data:images/mo-2.webp" class="img_webp">
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="data:images/mo-1.webp" class="img_webp">
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="data:images/mo-2.webp" class="img_webp">
                            </a>
                        </div>
                         <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="data:images/mo-1.webp" class="img_webp">
                            </a>
                        </div>

                    </div>
                    <!--中间那张美女图-->
                     <div class="picture">
                             <img src="data: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>

运行效果：