使用Ajax动态加载内容 [英] Dynamically loading content with Ajax

问题描述

我意识到以前已经解决过这个问题，但是我在舒适区域之外，我似乎无法将这些碎片放在一起以适应我的情况.

I realize this has been covered before, but im outside of my comfort zone and i cant seem to put the pieces toghether to fit my situation.

我正在构建一个浏览器游戏界面，并且需要在侧面菜单上单击不同的链接时通过ajax将不同的.php文件动态加载到div中.

I am building a browser game interface and i need to load dynamically through ajax different .php files into a div when different links are clicked on a side menu.

例如，该接口位于www.mydomain.com/interface.php上.

The interface resides on www.mydomain.com/interface.php for example.

例如，php文件位于www.mydomain.com/interfacepages/.

The php files reside in www.mydomain.com/interfacepages/ for example.

这是示例代码:

<!-- Navigation -->
<div class="menu">
<ul>
    <li><a href="#">Page1</a></li>
    <li><a href="#">Only a submenu container, not a real page/link.</a>
        <ul>
            <li><a href="#">Page2</a></li>
            <li><a href="#">Page3</a></li>
            <li><a href="#">Page4</a></li>
        </ul>
    </li>
    <li><a href="#">Only a submenu container, not a real page/link.</a>
        <ul class="submenu">
            <li><a href="#">Page5</a></li>
            <li><a href="#">Page6</a></li>
        </ul>
    </li>
    <li><a href="#">Page7</a></li>
</ul>
</div>
<!-- Content -->
<div class="content"></div>

我希望jquery/ajax提取链接的名称(或在某些情况下看到的rel属性)，在interfacepages文件夹中找到匹配的.php文件，并将其加载到内容div中.

I would like jquery/ajax to pull the name of the link (or the rel attribute as i saw done in some cases) find a matching .php file in interfacepages folder and load it into the content div.

例如，该链接指向interfacepages/page1.php，jquery将使该链接从php角度无效，而只是将该php文件包含在div中.

For example the link points to interfacepages/page1.php, jquery will make the link non working from a php perspective, and instead just include that php file in the div.

我需要它来在页面加载时加载默认的.php文件.

I would need it to load a default .php file on page load.

我不太确定该把什么作为href.

Im quite unsure what to put as href.

对不起，如果我表示自己错了，但是我缺少一些基本知识，我可能应该赶上来，但是我通常更喜欢通过尝试和失败来学习(但是4个小时后，我决定来这里:))

Sorry if i expressed myself wrong, but i am missing some basics i should probably catch up to but i usually prefer learning by trial and failure (but after 4 hours i decided to come here :) )

推荐答案

在您的js文件中，发生<一个>标记，然后输入此ajax代码:

In your js file, on click event of < a > tag, put this ajax code :

$.ajax({
            url: [link to your php file]
            type: [GET or POST]
            data: [if needed]
            success: function(html) { 
                alert(html); // display the response of your php function
            }
        });
    }

这篇关于使用Ajax动态加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！