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>
运行效果：
Java语言实现通过Ajax抓取后台数据及图片的更多相关文章
- 网站爬取-案例三：今日头条抓取(ajax抓取JS数据)
今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...
- iOS—网络实用技术OC篇&网络爬虫－使用java语言抓取网络数据
网络爬虫-使用java语言抓取网络数据 前提:熟悉java语法(能看懂就行) 准备阶段:从网页中获取html代码 实战阶段:将对应的html代码使用java语言解析出来,最后保存到plist文件 上一 ...
- iOS开发——网络实用技术OC篇&网络爬虫－使用java语言抓取网络数据
网络爬虫-使用java语言抓取网络数据 前提:熟悉java语法(能看懂就行) 准备阶段:从网页中获取html代码 实战阶段:将对应的html代码使用java语言解析出来,最后保存到plist文件 上一 ...
- java抓取网页数据，登录之后抓取数据。
最近做了一个从网络上抓取数据的一个小程序.主要关于信贷方面,收集的一些黑名单网站,从该网站上抓取到自己系统中. 也找了一些资料,觉得没有一个很好的,全面的例子.因此在这里做个笔记提醒自己. 首先需要一 ...
- Java抓取网页数据（原网页+Javascript返回数据）
有时候由于种种原因,我们需要采集某个网站的数据,但由于不同网站对数据的显示方式略有不同! 本文就用Java给大家演示如何抓取网站的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数 ...
- Java抓取网页数据（原来的页面+Javascript返回数据）
转载请注明出处! 原文链接:http://blog.csdn.net/zgyulongfei/article/details/7909006 有时候因为种种原因,我们须要採集某个站点的数据,但因为不同 ...
- 使用JAVA抓取网页数据
一.使用 HttpClient 抓取网页数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- iOS开发——网络实用技术OC篇&网络爬虫－使用青花瓷抓取网络数据
网络爬虫-使用青花瓷抓取网络数据 由于最近在研究网络爬虫相关技术,刚好看到一篇的的搬了过来! 望谅解..... 写本文的契机主要是前段时间有次用青花瓷抓包有一步忘了,在网上查了半天也没找到写的完整的教 ...
- iOS开发——网络使用技术OC篇&网络爬虫－使用正则表达式抓取网络数据
网络爬虫-使用正则表达式抓取网络数据 关于网络数据抓取不仅仅在iOS开发中有,其他开发中也有,也叫网络爬虫,大致分为两种方式实现 1:正则表达 2:利用其他语言的工具包:java/Python 先来看 ...
随机推荐
- C#学习笔记-继承基本知识
namespace Inheritance { class Program { static void Main(string[] args) { Dog dog = new Dog(); dog.A ...
- [SCOI2016]背单词——trie树相关
题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,”我怎么样才能快点学完,然后去玩三国杀呢?“.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他的计划册是长这样的: ...
- 推荐下：开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！
视频播放, 原本是想h5 自带视频播放,使用很简单,结果现实很骨感. <video controls="controls" preload="auto" ...
- Wasserstein GAN最新进展：从weight clipping到gradient penalty，更加先进的Lipschitz限制手法
前段时间,Wasserstein GAN以其精巧的理论分析.简单至极的算法实现.出色的实验效果,在GAN研究圈内掀起了一阵热潮(对WGAN不熟悉的读者,可以参考我之前写的介绍文章:令人拍案叫绝的Was ...
- cacti 安装与 与不能显示图像故障解决方案
on debian 7&8 apt-get install snmp snmpd apt-get install cacti cacti-spine apt-get install moreu ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- Android浮动按钮
https://www.jianshu.com/p/18cbc862ba7b https://github.com/yhaolpz/FloatWindow 这样就解决了切换 Activity 时悬浮控 ...
- springboot中filter的配置和顺序执行
项目结构 springboot版本 <parent> <groupId>org.springframework.boot</groupId> <artifac ...
- C#模拟HTTP POST 请求
GET请求: /// <summary> /// 获取accessToken /// </summary> /// <param name="corpid&qu ...
- 电话面试问答Top 50 --[伯乐在线]
今年是2015年,在过去几年中,电面(电话面试)是筛选程序员职位候选人的最流行的方式.它让雇佣双方很容易互相了解对方,候选人不需要去未来雇主的所在地,面试官也不用做额外的安排.这是我介绍程序员面试问题 ...