鱼C论坛

 找回密码
 立即注册
查看: 4172|回复: 8

[已解决]关于ajax加载html的问题

[复制链接]
发表于 2017-10-31 10:20:10 | 显示全部楼层 |阅读模式
10鱼币
本帖最后由 gopythoner 于 2017-10-31 10:39 编辑

首先说一下我的web内容:

就是一个博客的内容页面(跟简书一样),文章的内容信息都是当前请求得到的网页,而现在,我需要使用ajax来加载当前文章对应的评论页面到这个页面中的一个div标签中。

其实我已经实现了这个操作,使用的是jQuery 的ajax

所以,问题来了,因为我使用的是jQuery而不是原生的js,所以我加载评论html的函数必须放在引入jQuery的js文件之后才能生效,这就导致了一个问题,因为一般来说js的文件会放在页面的最后(这个的原因我懂),也就是说等当前页面完全加载之后再运行我加载评论的js函数,我感觉打开页面的时候评论列表的加载有一个很短的加载过程,有点不自然

所以,我想问的是,我在使用ajax加载一个请求页面到当前页面的时候,是使用原生的js,然后把js代码放在网页的中间部分(大概就是在加载评论的那个div的下面),还是继续像我已经做的,使用jQuery,然后把js代码放在最后面?

或者,一般这种ajax的加载是使用什么样的方法呢?

具体的网页结构如下http://www.stopfollow.com/article/python-crawler-by-lxml-to-autohome/

这个目前还不是使用的ajax加载效果,只是说明一下网页结构
最佳答案
2017-10-31 10:20:11

1、加载ajax请求顺序
        当你的项目没有涉及到异步加载,js放在哪里不会影响你函数的加载顺序。

2、ajax一般不是用来加载html
        ajax在日常开发中,常用来向服务器发起请求,得到数据(常用json)

3、加载html
        最简单的标签href跳转就可以,在复杂些self.location

4、加载ajax
        最简单的jq写法:
$.getJSON("文件目录/目标文件.json", function (data) {
                    var $jsontip = $("#jsonTip1");

                    var newdata = $.extend({}, data.data);
}
       

最佳答案

查看完整内容

1、加载ajax请求顺序 当你的项目没有涉及到异步加载,js放在哪里不会影响你函数的加载顺序。 2、ajax一般不是用来加载html ajax在日常开发中,常用来向服务器发起请求,得到数据(常用json) 3、加载html 最简单的标签href跳转就可以,在复杂些self.location 4、加载ajax 最简单的jq写法: $.getJSON("文件目录/目标文件.json", function (data) { var $jsontip = $("#jsonTip1"); ...
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-10-31 10:20:11 | 显示全部楼层    本楼为最佳答案   

1、加载ajax请求顺序
        当你的项目没有涉及到异步加载,js放在哪里不会影响你函数的加载顺序。

2、ajax一般不是用来加载html
        ajax在日常开发中,常用来向服务器发起请求,得到数据(常用json)

3、加载html
        最简单的标签href跳转就可以,在复杂些self.location

4、加载ajax
        最简单的jq写法:
$.getJSON("文件目录/目标文件.json", function (data) {
                    var $jsontip = $("#jsonTip1");

                    var newdata = $.extend({}, data.data);
}
       
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-11-2 10:19:26 | 显示全部楼层
不二如是 发表于 2017-10-31 10:20
1、加载ajax请求顺序
        当你的项目没有涉及到异步加载,js放在哪里不会影响你函数的加载顺序。

你的意思是我这个评论的列表不应该使用ajax去加载html,而是使用你说的第3种么?
麻烦帮我看看简书的评论是属于那种方式加载出来的
我知道一般ajax都是返回一个json,不过我这个评论列表的确是需要加载出来的,我查查你说的这几种方式先,看看我的需求到底属于什么类型

感谢回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-11-2 10:34:19 | 显示全部楼层
不二如是 发表于 2017-10-31 10:20
1、加载ajax请求顺序
        当你的项目没有涉及到异步加载,js放在哪里不会影响你函数的加载顺序。

我看了一下简书的确是请求得到了一个json,也即是评论的信息
那么问题来了,怎么把这个json放到html模板中的,这个我好想是没有用到过

我之前的做法是ajax去请求另一个请求地址,而这个请求地址返回的就是一个html片段,所以我直接加载了这个html,我这种做法不妥么?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-11-2 10:51:21 | 显示全部楼层
gopythoner 发表于 2017-11-2 10:34
我看了一下简书的确是请求得到了一个json,也即是评论的信息
那么问题来了,怎么把这个json放到html模板 ...


如果没有框架,常常手动在页面拼json(高B格的``ES模板字符串现在很流行)

给你个手动拼json的例子,大同小异:
  1. // 绘制
  2.                     var strHtml = "";//存储数据的变量
  3.                     $jsontip.empty();//清空内容
  4.                     $.each(dataSource.rows, function (infoIndex, info) {
  5.                         if (info.cells[0] == null) {
  6.                             return true;
  7.                         }

  8.                         strHtml += '<tr><td><b class="roleNum">' + (infoIndex + 1)
  9.                             + '</b></td><td>' + info.cells[0] + '</td><td>'
  10.                             + info.cells[colIndex] + '</td></tr>';
  11.                     })
  12.                     $jsontip.html(strHtml);//显示处理后的数据
复制代码


模板字符串玩法: 拼json_模板字符串.zip (81.12 KB, 下载次数: 0, 售价: 20 鱼币)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-11-2 11:36:13 | 显示全部楼层
不二如是 发表于 2017-11-2 10:51
如果没有框架,常常手动在页面拼json(高B格的``ES模板字符串现在很流行)

给你个手动拼json的例子 ...

html的标签都是在js里面的啊,这个其实我也是想到过,但是我感觉没有使用模板直观
所以我直接用ajax返回一个已经成型的html块,这样js中只需要加载返回的结果就行了
我这种加载的方式跟直接返回json格式有什么缺陷么?出了json格式可以当做API使用以外
我只考虑展示效果问题,并不在乎其他,毕竟是个人博客,不需要API
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-11-2 11:42:12 | 显示全部楼层
不二如是 发表于 2017-11-2 10:51
如果没有框架,常常手动在页面拼json(高B格的``ES模板字符串现在很流行)

给你个手动拼json的例子 ...

对了,你会django么?
你懂前端的话,学学django吧,我学了一个多月,个人博客的基本功能已经实现了差不多了,如果会前端的话,应该很多东西可以放在前端去实现,感觉会更爽

比如提交表单这个事情,我在使用ajax之前是用的django的表单模型,后来会用ajax之后我发现不管是get还是post我都想放在前端,后端只需要处理请求就行了

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-11-3 08:39:45 From FishC Mobile | 显示全部楼层
楼主做的这个博客很不错啊,我很想你知道你搜索功能咋做的ORZ,我暑假也学了一点django,类比过来,不用json的话我是在views.py里面写一个专门构造评论的函数,直接用httpresponse回复评论区的HTML内容(因为每次评论都要对整体刷新,光添加一条我发表的内容肯定不够)ajax请求来访问这个网址(函数),然后把这个网址的内容通过ajax加载到评论区
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-11-3 09:50:07 | 显示全部楼层
591821661 发表于 2017-11-3 08:39
楼主做的这个博客很不错啊,我很想你知道你搜索功能咋做的ORZ,我暑假也学了一点django,类比过来,不用jso ...

搜索使用的haystack和jieba分词
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 07:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表