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

gopythoner

首先说一下我的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");

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

gopythoner

不二如是 发表于 2017-10-31 10:20
1、加载ajax请求顺序
        当你的项目没有涉及到异步加载，js放在哪里不会影响你函数的加载顺序。

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

感谢回复

gopythoner

不二如是 发表于 2017-10-31 10:20
1、加载ajax请求顺序
        当你的项目没有涉及到异步加载，js放在哪里不会影响你函数的加载顺序。

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

我之前的做法是ajax去请求另一个请求地址，而这个请求地址返回的就是一个html片段，所以我直接加载了这个html，我这种做法不妥么？

不二如是

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

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

给你个手动拼json的例子，大同小异：

// 绘制
                    var strHtml = "";//存储数据的变量
                    $jsontip.empty();//清空内容
                    $.each(dataSource.rows, function (infoIndex, info) {
                        if (info.cells[0] == null) {
                            return true;
                        }

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

模板字符串玩法： 拼json_模板字符串.zip (81.12 KB, 下载次数: 0, 售价: 20 鱼币)

2017-11-2 10:51 上传

点击文件名下载附件

gopythoner

不二如是 发表于 2017-11-2 10:51
如果没有框架，常常手动在页面拼json（高B格的``ES模板字符串现在很流行）

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

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

gopythoner

不二如是 发表于 2017-11-2 10:51
如果没有框架，常常手动在页面拼json（高B格的``ES模板字符串现在很流行）

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

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

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

591821661

楼主做的这个博客很不错啊，我很想你知道你搜索功能咋做的ORZ，我暑假也学了一点django，类比过来，不用json的话我是在views.py里面写一个专门构造评论的函数，直接用httpresponse回复评论区的HTML内容（因为每次评论都要对整体刷新，光添加一条我发表的内容肯定不够）ajax请求来访问这个网址（函数），然后把这个网址的内容通过ajax加载到评论区

gopythoner

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

搜索使用的haystack和jieba分词