Question

我已经建立了一个网上商店....现在默认显示屏显示书店中的所有书籍......我想这样做，以便当用户点击畅销书时它会运行displayBestSellers函数......但是我希望结果显示在同一页面上...所以例如现在它显示所有书籍，但是当我点击畅销书时，我希望它只显示最畅销的商品并隐藏所有其他商品... 这是我的按钮和功能代码......

<section>
        <form action="results.php" method ="post">
        <input type  ="submit" name="submit" value="Show All"/>
        <input type  ="submit"  name="submit" value="Best Sellers"/>
        <select name ="searchtype">
            <option value="author">  </option>
            <option value="author"> By author:   </option>


        </select>
        <select name ="searchtype">
            <option value="author">  </option>
            <option value="genre"> By genre:    </option>


        </select>
        <br />

    </form>
    </section>

然后我有两个php / MySQL函数displayAll（$ db），它显示数据库中的所有书籍和displayBestSellers（$ db），它显示数据库中所有畅销书... 感谢

Answer 1

HTML代码没有提供太多的见解，但根据您的说法，我认为您需要的是在点击按钮时触发AJAX请求，重新加载页面上显示的内容。

包括jQuery

如果您还没有这样做，则应在HTML源代码中包含jQuery。您可以将其下载并将其放在服务器上，也可以使用托管版本，例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

只需将其放入HTML的<head> </head>部分即可。

准备HTML

要动态加载图书，您需要将图书清单放在<div>部分。您还应该在按钮上添加id属性，以便稍后在您的javascript中引用它们。您的代码看起来像这样：

<section>
        <form action="results.php" method ="post">
        <input type="button" id="showAllButton" value="Show All"/>
        <input type="button" id="showBestSellersButton" value="Best Sellers"/>

         <!-- your other stuff ... -->


         <div id="booklist">
            <!-- dynamically loaded content goes here -->
         </div>

    </form>
</section>

请注意，我将按钮从提交类型转到按钮。如果您希望非JavaScript表单提交也能正常工作，您需要在其中投入更多精力，这超出了本答案的范围。谷歌为它提供了很多例子。

然后在HTML源代码中添加一些javascript，将点击操作绑定到按钮并执行ajax调用......

添加AJAX调用

<script>
    $( document ).ready(function() {
        $("#showAllButton").click(function() {
           loadBooks(false);
        });

        $("#showBestSellersButton").click(function() {
           loadBooks(true);
        });
    });

    function loadBooks(showbestsellers) {
            $.ajax({
              method: "POST",
              url: "results.php",
              data: { bestsellers: showbestsellers ? 1 : 0 }
            }).done(function(result) {
              $("#booklist").html(result);
            });                
    }

</script>

以PHP处理您的请求

最后，您需要在PHP中处理请求并执行以下操作：

if ($_POST["bestsellers"]) {
    displayBestSellers($db);
} else {
    displayAll($db);
}

提供displayBestSellers()和displayAll()个功能只会返回<div>部分中的HTML，而不是整个网页。

免责声明：我刚刚将代码整理到textarea中，因此它可能充满了错误并且无法正常工作。我的目的只是为了让你走上正轨。阅读http://api.jquery.com/jquery.ajax/中jQuery中的ajax调用文档或一般的jQuery文档。

这里有很多需要改进的地方：你应该在ajax调用中处理错误，你应该构建表单，以便即使在禁用javascript的情况下也可以工作，你可以在加载内容时显示一个微调器，你可以设置更改的动画...并且您的HTML代码建议您必须添加一些定义作者和流派过滤器的参数（您可以将其与数据对象中的ajax调用一起传递，阅读jQuery文档以了解如何获取所选项目从选择领域来看，这并不难。）

希望我能帮忙！

更改显示单击按钮以显示php功能

1 个答案:

包括jQuery

准备HTML

添加AJAX调用

以PHP处理您的请求