jQuery $.ajax 同步异步执行问题求解。_H5之家 - 中国HTML5教程资源分享第一站

使用jQuery的Ajax获取数据，
html:

javascript代码如下：

jQuery(document).ready(function($) { $('.files-show').on('click', function(event) { var $contents = $('.file-list-content'), $url = "/files"; $.ajax({ type : "get", url : url, data : {}, success : function(res){ // console.log(res); $contents.html(res); } }); }); });

上面的代码执行后在success中若是cosole.log(res);控制台会显示打印出数据，但如果是下一句$contents.html(res);这时候页面的所有点击事件都无法点击了，并且控制台提示警告：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check

w3cschool上的解释：

async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

在Ajax中加上async:true依然没用。

后台使用Yii，我直接渲染的一段html返回：

public function actionIndex() { $files = File::find()->where(['enable' => '1'])->orderBy('id DESC')->all(); if ($files) { $page = $this->renderPartial('files', array( 'files' => $files ), true); return $page; } }

渲染的是一个很简单的table：

<table> <thead> <tr> <th><h3>ID</h3></th> <th><h3>文件名</h3></th> <th><h3>类型</h3></th> <th><h3>大小</h3></th> <th><h3>下载次数</h3></th> <th><h3>操作</h3></th> </tr> </thead> <tbody> <?php foreach ($files as $file) : ?> <tr> <td><?php echo $file->id; ?></td> <td><?php echo $file->name; ?></td> <td><?php echo $file->filetype; ?></td> <td><?php echo $file->filesize ?></td> <td><?php echo $file->download_num ?></td> <td> <div data-am-dropdown> <button data-am-dropdown-toggle><span></span> <span></span></button> <ul> <li><a href="#">1. 编辑</a></li> <li><a href="#">2. 下载</a></li> <li><a href="#">3. 删除</a></li> </ul> </div> </td> </tr> <?php endforeach;?> </tbody> </table> <script src="/js/amazeui.min.js"></script>

在浏览器控制台中输出res结果就是table的内容。

麻烦请解答一下，谢谢。