javascript - 使用 jquery 打开页面而不加载

Question

我制作了这个网页，只是为了开始使用网络，基于这个模板。

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

单击投资组合中的缩略图时，会打开另一个网页，其中包含有关图片的更多详细信息。我编写的代码正在加载页面。我想完全按照这个模板来实现它。

html(缩略图):

<div class = "pictures ">
            <div class = "container ">
                <div >

                    <center><b><text>PORTFOLIO</text></b></center>
                </div>
                <div class = "pics">
                  <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img data-src = "glass.png" src = "cabin.png" id="cabin" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "cake.png" id="cake" alt="" />
                    </div>
                    </div>
                </div>
                    <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img  data-src = "glass.png" src = "circus.png" id="circus" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "game.png" id="game" alt="" />
                    </div>

                    </div>
                    </div>
                    <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "safe.png" id="safe" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "submarine.png" id="submarine" alt="" />
                    </div>
                    </div>

                    </div>
                    </div>
            </div>
        </div>

用于打开新页面的 Jquery :

$(".pictures .thumbnail img").click ( function () {
                    window.location.href = this.id +".html";

                });

我应该对代码进行哪些更改，以允许我在不加载/刷新的情况下打开页面？

提前致谢!

Answer 1

您应该学习一些 AJAX 来实现这一点。阅读jQuery Docs on AJAX了解更多信息。

Ajax 是一种客户端脚本，可以与服务器/数据库进行通信，无需回发或完整的页面刷新。我读过的 Ajax 的最佳定义是“与服务器交换数据并更新网页部分内容的方法 - 无需重新加载整个页面。”来源:Seguetech

下面是一些 AJAX 和 jQuery 示例:

$(document).ready(function(e) {

    $("form[ajax=true]").submit(function(e) {

        e.preventDefault();

        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();

        $("#loadingimg").show();

        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                          
                $("#result").html(returnhtml); 
                $("#loadingimg").hide();                    
            }           
        });    

    });

});

DEMO

<小时/>

要无所畏惧。它看起来有点令人困惑，尤其是刚开始使用 jQuery，但相信我，事实并非如此。你会很高兴你学会了它。