phpstudy集成环境

 首页 > jQuery $.ajax 同步异步执行问题求解。

jQuery $.ajax 同步异步执行问题求解。

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

<div class="file-list-content"></div>
<hr>
<button class="files-show">显示数据</button>

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 http://xhr.spec.whatwg.org/.

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 class="am-table am-table-bordered tinytable" id="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 class="nosort"><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 class="am-dropdown" data-am-dropdown>
                <button class="am-btn am-btn-default am-btn-xs am-dropdown-toggle" data-am-dropdown-toggle><span class="am-icon-cog"></span> <span class="am-icon-caret-down"></span></button>
                    <ul class="am-dropdown-content">
                        <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的内容。

麻烦请解答一下，谢谢。

  1. 很大概率，你的问题和async为true或者false无关

  2. 如控制台的warning和此问题有关，请将jquery版本更新到最新版

  3. 请先更改错别字：点击时间

更新

你说 $contents.html(res); 会导致问题，那么请仔细查看res中的内容。如还搞不定，就将res内容发上来吧。

打扰各位技术朋友了，这个问题我自己解决了。
原因：
因为我在异步请求的页面中有一段：

<script src="/js/amazeui.min.js"></script>

然后将其修改为：

<script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>

之后以上描述的问题就不存在了，至于是什么深层次的原因我也不知道。

同步Ajax在主线程会阻塞整个页面。建议找一下看看哪个Ajax是同步的一直没有返回。

【热门文章】
【热门文章】