webmagic获取动态页面数据(通过js、Ajax渲染的页面)

本篇文章就不介绍webmagic了。
普通的静态页面获取这里也不说了,相信大家都没问题。
这里主要记录两种动态页面获取方法
1.数据存在页面js代码中

在这里插入图片描述
直接上代码

@Component
public class JobProcessor implements PageProcessor {
    private String url = "https://search.51job.com/list/000000,000000,0000,00,9,99,java,2,1.html?lang=c&postchannel=0000&workyear=99&cotype=99&degreefrom=99&jobterm=99&companysize=99&ord_field=0&dibiaoid=0&line=&welfare=";
    @Override
    public void process(Page page) {
        //先获取script标签,为了拿到我们想要的那个script标签,使用正则表达式筛选(看script中包含什么独有的内容)
        String jobinfo = page.getHtml().css("script").regex(".*SEARCH_RESULT.*").get();
  		// 解析拿到json字符串
        jobinfo = jobinfo.substring(jobinfo.indexOf("{"), jobinfo.lastIndexOf("}") + 1);
        // 创建json对象
        JSONObject jsonObject = (JSONObject) JSONObject.parse(jobinfo);
        // 根据分析拿到放置信息的数组,这里根据你获取的json字符串格式来判断是转化为数组还是直接操作字符串
        JSONArray resArr = jsonObject.getJSONArray("engine_search_result");
    }

    private Site site = Site.me()
            .setCharset("utf-8")
            .setTimeOut(10 * 1000)
            .setRetryTimes(3)
            .setRetrySleepTime(3000);

    @Override
    public Site getSite() {
        return site;
    }

    //initialDelay任务启动后多久执行方法
    //fixedDelay每隔多久执行方法
    @Scheduled(initialDelay = 1000, fixedDelay = 100 * 1000)
    public void process() {
        Spider.create(new JobProcessor())
                .addUrl(url)
                .thread(10)
                .run();
    }
}

2.从Ajax接口获取数据,也是重点记录的一种情况
首先查看网页源代码发现没有我们想要的内容
f12打开控制台,选择network选项卡,选择XHR刷新页面,获取Ajax请求信息,找到返回数据是我们需要的Ajax接口,如果无法直接访问,即直接复制Ajax请求路径到浏览器打开无法获取数据,则需要该分析Ajax的请求头
在这里插入图片描述
这里简单分析一个链接

https://aiqicha.baidu.com/yuqing/latestLyricalAjax?p=1&type=list&_=1629375871000

很明显的看到前面都是固定的,p=1&type=list是分页,1629375871000明显是时间戳。url分析完,我们就知道抓取页面时怎么拼接url了。其他的一些请求头设置如下,有的Ajax接口有访问限制,需要设置请求头。
在这里插入图片描述

@Component
public class JobProcessor implements PageProcessor {
        private String url = "https://aiqicha.baidu.com/yuqing/latestLyricalAjax?p=1&type=list&_="+System.currentTimeMillis()/1000+"000";
    @Override
    public void process(Page page) {
    	//这里就可以获取所需数据了,具体页面解析这里就不说了
        System.out.println(page.getHtml());
        //这里使用webmagic-extension中自带的JsonPathSelector来获取
        List<String> list = new JsonPathSelector("$.data[*]").selectList(page.getRawText());
    }

	//这里的Ajax接口有访问限制,所以需要设置请求头,请求头的设置根据分析的请求头来
    private Site site = Site.me()
            .setCharset("gbk")
            .setTimeOut(10 * 1000)
            .setRetryTimes(3)
            .addHeader("Accept-Encoding", "/")
            .addHeader("X-Requested-With","XMLHttpRequest")
            .addHeader("Referer","https://aiqicha.baidu.com/yuqing/latestlyricallist")
            .setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36")
            .setRetrySleepTime(3000);

    @Override
    public Site getSite() {
        return site;
    }

    //initialDelay任务启动后多久执行方法
    //fixedDelay每隔多久执行方法
    @Scheduled(initialDelay = 1000, fixedDelay = 100 * 1000)
    public void process() {
        Spider.create(new JobProcessor())
                .addUrl(url)
                .setScheduler(new QueueScheduler().setDuplicateRemover(new BloomFilterDuplicateRemover(10000)))
                .thread(10)
                .run();
    }
}

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 当使用AJAX从后台获取数据之后,我们需要将获取到的数据渲染到前端页面上,以便用户可以看到数据的呈现。 首先,在前端需要准备好一个预留数据呈现的区域,比如一个<div>标签或者<ul>/<ol>列表标签。也可以通过jQuery等前端框架提供的选择器,在DOM中动态创建元素来呈现数据。 其次,我们需要将从后台获取到的数据进行一定的格式转换,以便可以在前端页面上呈现。比如,从后台获取到的数据可能是JSON格式,需要通过JSON.parse()方法将其解析为JS对象后再进行操作。 然后,我们可以通过DOM操作的API,将解析后的数据渲染到前端页面上。比如,通过innerText、innerHTML等属性设置文字内容,图片链接等属性设置图片、链接等内容。 最后,我们需要注意数据呈现的方式和样式。可以用CSS样式在前端页面中设置数据呈现方式和样式。也可以使用前端框架中提供的组件或者已有样式库进行快速布局和样式设置。最后,我们还需要对数据呈现区域进行优化和美化,以提升用户体验。 总之,通过以上方式,我们能够在前端页面上直观清晰、美观呈现后台获取数据,实现用户与网站的交互和数据交流。 ### 回答2: 在使用Ajax从后台获取数据后,我们需要将数据渲染页面上,为此,我们通常会使用DOM操作来完成。一个典型的流程是: 1. 创建DOM元素:可以使用JavaScript中的createElement()方法来创建一个新的DOM元素,或者innerHTML来在已有元素中插入HTML内容。 2. 获取数据:在Ajax请求成功后,我们可以通过回调函数中的responseText属性来获取从后台返回的数据。 3. 解析数据:对于返回的数据,我们通常会将其解析成JSON格式,这可以使用JSON.parse()方法实现。 4. 遍历数据:对于解析后的JSON数据,我们可以使用JavaScript的for-in循环来遍历其中的属性和值。 5. 填充数据:在遍历数据的过程中,可以创建DOM元素并将数据填充到元素中。然后使用appendChild()方法将元素添加到页面中。 6. 显示数据:最后,我们需要将数据显示在页面上,可以使用innerHTML来将数据渲染到指定的DOM元素中。 需要注意的是,由于Ajax是异步的,因此需要使用回调函数来处理从后台获取到的数据。在获取数据后,并非所有的数据都需要进行渲染,可以根据具体需求来选择需要渲染数据。此外,为了提高用户体验,我们也需要对数据渲染进行优化,比如分页、懒加载等。 ### 回答3: 当使用Ajax从后端获取数据后,我们需要将获取到的数据渲染页面上,以便用户可以看到数据。这个过程一般有以下几个步骤。 1. 解析数据 数据一般是以JSON格式返回,我们需要将其解析成JavaScript对象。可以使用JSON.parse()方法将JSON数据转换为JavaScript对象,或使用jQuery提供的$.parseJSON()方法进行转换。 2. 构造HTML结构 接下来,我们需要根据获取到的数据构造HTML结构。一种常见的方式是使用jQuery的模板引擎,例如Handlebars.js、Underscore.js等。模板引擎可以将数据和HTML结构分离,避免在JavaScript代码中写大量的HTML字符串。 3. 插入到页面 完成HTML结构后,我们需要将其插入到页面中。可以使用jQuery提供的方法,例如.html()、.append()等。其中.html()方法可以将HTML代码直接替换掉指定元素的内容,而.append()方法则可以在指定元素的末尾添加HTML代码。 4. 数据更新 最后,我们需要在Ajax请求成功后更新数据。这可以通过将请求成功的回调函数传递给$.ajax()方法的success参数来实现。在回调函数中,我们可以重新获取数据,构造HTML结构,然后将其插入到页面中。 总之,Ajax从后台获取数据后,我们需要将数据解析出来,构造HTML结构,插入到页面中,并在数据更新时进行相应的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值