点击按钮,实时更新右侧的内容 ajax技术$.post()方法同步局部刷新页面

我感觉我真的好机智啊,有些很偏的问题,百度不到的时候,真的就只能靠自己钻研了
我是想通过点击按钮根据左侧框中的问题编号来更新显示右侧是弹出框中的data-content的内容(每一编号对应的名称)。
点击按钮,实时更新右侧的内容 ajax技术$.post()方法同步局部刷新页面_第1张图片
我是用bootstrap中的popover弹出框来实现的,下面是菜鸟教程给出关于弹出框的案例:

<button type="button" class="btn btn-warning" title="Popover title"  
		data-container="body" data-toggle="popover" data-placement="right" 
		data-content="右侧的 Popover 中的一些内容">
	右侧的 Popover
button>
<script>
$(function () { 
	$("[data-toggle='popover']").popover();
});
script>

但是网上对popover的介绍很少,只是指明了弹出框的内容是放在data-content的值里面的,但怎么自定义值却没说。我是用jQuery的方法给它赋值的$("#btn").attr("data-content","test");可以通过这用方式存值。如果想将值以HTML的形式显示,则将$("[data-toggle='popover']").popover();改写成$("[data-toggle='popover']").popover({ html : true });即可。

我是希望每点击一次button,都能够实时显示我当前编号对应的题目,然而我刚开始只是用$.post()方法去异步获取编号对应的题目,但我发现每次点击的弹出框内容都是一样的,即使我更改了编号,弹出框内容也不变,我觉得弹出框的内容是在js刚开始执行的时候,就初始化好了的,它的值并不是由每次点击事件来决定的,点击事件只是触发了弹出框的显示功能。
于是乎,我重写了button的点击事件,每次点击时都更新$("#btn").attr("data-content",res);
然而,这个时候问题又来了,就是我所需要的值是通过$.post()方法获取的,$.post()方法默认是异步操作,异步操作有延迟,导致我的弹出框都弹出来了,我所需要的值还没返回回来,以至于弹出框显示的内容就是错误的。
思来想去,我觉得既然是不同步的问题,那我就将$.post()方法改成同步的不就好了吗,我就尝试了一下,在$.post()方法调用前后分别加上一句
$.ajaxSettings.async = false;$.ajaxSettings.async = true;就可以了。

最终代码如下所示:

Problems:<input class=input-xxlarge type=text size=60 name=cproblem value='' id="plist">
<button id="btn" type="button" class="btn btn-sm btn-success" title="赛题预览"
        data-container="body" data-toggle="popover" data-placement="right"
        data-content="点击预览赛题">
    点击预览赛题
button>
<script>
$(document).ready(function(){
    $("#btn").click(function () {
        var str = $("#plist").val();
        var pids = str.split(",");
        var res = {};
        var html = "";
        $.ajaxSettings.async = false;
        $.post("../postFunction.php?action=problems",{str:str}, function (data) {
            res = JSON.parse(data);
            for(var i = 0; i < pids.length; i++){
                html += ""+pids[i]+":"+res[i]+"
"
; } $("#btn").attr("data-content",html); }); $.ajaxSettings.async = true; }); $("[data-toggle='popover']").popover({ html : true }); });
script>

遇到问题不要退缩,要尝试一步步的去解决它

你可能感兴趣的:(前端开发,JavaScript,Bootstrap)