如何从加载的div中加载sql/session内容到一个div

这两天我一直在找，什么也没找到。

结构:

index . php:

    <head>
     <script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
     <script type="text/javascript" src="function.js"></script>
    </head>
    <body>
    <div>
     <div><a href="" class="testcat" id="1">Show</a></div> *-->if I click this link data loads into DIV below by function.js without reloading*
     <div id="producten"></div> *-->testpage.php loads here perfect,
the code of testpage.php makes by while loop other links.
Here I want to click on a link to load next data in div id=information 
without reloading the index.php so the data in the first DIV stay visible 
and I dont know how to do that*
     <div id="information"></div> *-->testpage2.php have to load data from sql in this DIV*
    </div>
    </body>

function.js:

$(document).ready(function() {
    $(".testcat").click(function() {
        var testid = $(this).attr("id");
        var datastring = 'id='+ testid ;
        $.ajax({
            type: "POST",
            url: "testpage.php",
            data: datastring,
            cache: false,
            success: function(res) {
            $('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
                .hide()
                .fadeIn(2000, function() {
                $('#producten').html(res);
            })
            }
        });
        return false;
    }); 
});

testpage.php和testpage2.php是sql数据的PDO代码。

您将需要与on附加单击处理程序，以便动态添加的内容仍然具有相同的ajax处理程序:

添加任何需要的信息来区分一次点击和下一次点击，即

<a href='...' data-resultdiv='production'

然后，稍微清理一下处理程序:我假设您希望ajax请求转到链接的href，并且希望立即显示"正在加载"(而不是等待请求完成)。

最后，要取消锚的默认行为，即浏览href引用的页面，您可以返回false;

$(document).on("click", "a", function() {
    var href = $(this).attr("href");
    var successDiv = $(this).data("resultdiv");
    $('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>");
    $.ajax({
       type: "POST",
       url: href,
       data: datastring,
       cache: false,
       success: function(res) {
           $('#' + successDiv).hide().html(res).fadeIn(2000);
       }       
    }
    return false;
});

当然，如果你只希望它对特定的锚运行，你可以在on

的调用中添加一个选择器

$(document).on("click", "a.someClass", function() {

相关内容

最新更新

热门标签：