在不重新加载页面的情况下生成包含数据的页面

Question

我在尝试构建一个基于 MySQL 数据库生成其内容的移动应用程序时遇到了以下问题。我的问题是，当我想从第 "A" 页转到第 "B" 页时，第 "B" 页完全是空的，除非在新选项卡中打开第 "B" 页，其中如果它显示请求的内容没有任何缺陷。

我使用的代码（简体）：

<div data-role="page" id="main">
    <div data-role='header' data-position='fixed'>
        <a href='#home' class='ui-btn-right' data-icon= 'home' data-iconpos='notext'  data-direction='reverse'></a>
        <h2>Activities</h>
    </div>
    <?php
    //(I'll keep the login and connection code out since it is irrelevant to the problem)

    $result = mysql_query("SELECT DISTINCT profession FROM members",$mysql) or die("");
    $query_amount = mysql_query("SELECT richting, COUNT(*) AS aantal FROM sport GROUP BY profession",$mysql) or die("");
    $query_membernr = mysql_query("SELECT membernr FROM members",$mysql) or die("");


    while(list($r) = mysql_fetch_row($query_amount))
    {

       $profession[]=$r;

            print ("
            <div data-role='content'>
              <ul data-role='listview' data-inset='false' id='pag1'>
                        <li>
                        <a href='index.php?richtingstack=$r#2a'>
                        <img src='images/something.jpg' height='80' align='middle' />
                        <p><h2> 
                        $r
                        </h2></p>
                        </a>
                     </li>
              </ul>
            </div>
            <div data-role='footer' data-position='fixed'><h2>Kies een activiteit</h2>
            </div>"
            ) ;


    }

    ?>


</div>

此页面（页面"A"）完美运行，由请求数据的菜单生成。它创建了所有数据库用户的职业列表。（成员）

当有人按下此列表中的一个按钮时，它应该转到一个页面（无需重新加载整个应用程序），其中包含该职业适用的成员列表。此页为第 2a 页，并与 GET 变量组合。

出于某种原因，当我单击其中一个按钮时，页面 #2a 出现了，但是除了页眉和页脚之外，页面完全没有内容，当然这两者都不会生成。

但是，如果我右键单击其中一个按钮并在新选项卡中打开 link（可以说是在不同的选项卡中重新加载应用程序），它会完美运行。如果有人能告诉我我做错了什么以便我可以继续，我真的很感激。

Answer 1

如果您想拥有一个无需重新加载的动态站点，请使用 AJAX。

Answer 2

PHP 无法在运行后创建内容。

您要搜索的是 AJAX（异步 JavaScript 和 XML）。基本上，它允许您从任何地方提取内容而无需重新加载页面。客户端部分是纯javascript。例如，您可以加载页面 http://yourdoma.in/index.php?tab=B，然后将 div data-role="content" 替换为该页面中的文本。

就我个人而言，我更喜欢将 jQuery 用于 AJAX，因为使用纯 javascript 必须处理的所有错误处理在写入和读取时会变得非常烦人。您可以找到 jQuery AJAX-文档 here. Or, if you want to go with pure javascript, here.

Answer 3

为此，您可以简单地使用 Ajax 来帮助您，而无需重新加载页面。假设这样

 $.ajax({
    url: "test.php",
    type: "post",
    data: data of you want,
    success: function(content){
        $("#B").html(content);
    },
    error:function(){

        $("#B").html('Content loaded problem');
    }
});

在不重新加载页面的情况下生成包含数据的页面

Generating a page with data without reloading the page

php

mysql

anchor

jquery

get