jQuery 加载 <button> 而不是 href答案

【问题标题】：jQuery load for <button> instead of hrefjQuery 加载 <button> 而不是 href
【发布时间】：2015-12-21 16:27:04
【问题描述】：

我目前有一个购物车，我正在将其加载到我自己的自定义仪表板中，例如使用一个 html 页面将 php 购物车页面加载到我自己的 html 文件中。

$app->get('/cata-categories/?', function () use ($app) {   
           $app->render('cata-categories.html', [
               'page' => [
                   'author' =>         $app->site->author,
                   'title' =>          "Catagories",
                   'description' =>    "Catalogue Catagories.",
                   'alerts' =>         $app->alerts->getAndClearMessages()
               ]
           ]);  
        });

为了让它正常工作，我正在我自己的仪表板页面的 div 内加载购物车页面的链接。

<ol id="categories"></ol>

                <script>
                    $( "#categories" ).load( "../solutions/admin/index.php?route=catalog/category" );
                </script>

为了将所有内容保留在仪表板中，我在这些购物车页面上的链接也在同一个 div 中打开，我也在使用加载功能。

在我使用的同一个 div 中加载 href 链接的代码如下：

$("#categories").on("click", "a", function (e) {
    $("#categories").load($(this).attr("href"));
    e.preventDefault();
});

我还有提交表单或加载/链接到另一个页面的按钮：例如。

<button type="submit" form="form-category" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>

我希望在单击该页面上的这些按钮和其他按钮时将其加载到同一个 div 中，就像一个 href 链接一样。

基本上我的问题是我用什么来代替 .attr("href")？

【问题讨论】：

如果您想提交表单而不导致页面加载，则需要使用 AJAX。为此，您需要使用 $.post()、$.get() 或 $.ajax()（取决于您的要求）而不是 load()。

标签： php jquery

【解决方案1】：

首先建议，如果您想提交表单而不导致页面加载，则需要使用 AJAX。

其次如果您仍打算使用$.load()，您可以在按钮中添加data-* 属性，例如说data-url="your url"。

<input type="submit" data-url="your-url" value="Load" />

现在使用jQuery 捕获点击事件，阻止其默认设置，并使用.attr("data-url") 加载数据。

【讨论】：

在数据属性中复制表单的操作是多余的。
@Quentin 只是为了 OP 要求的缘故

【解决方案2】：

表单的操作会告诉你 URL。

您需要以不同的方式表达数据，具体取决于表单是发出 GET 还是 POST 请求。

类似的东西：

$("button").on('click', function (e) {
    var $f = $(this.form);
    var data;
    if (f.attr("method").toLowerCase() === "post") {
        data = $f.serializeArray();
    } else {
        data = $f.serialize();
    }
    $("#categories").load(
        $f.attr("action") || location.href,
        data
    );
    e.preventDefault()
});

... 可能会成功，但我还没有测试过。

【讨论】：

谢谢，我今天将对此进行测试并报告。

【解决方案3】：

所以我意识到我错在哪里了。购物车具有验证表单/提交等功能，我只需要使用

$this->response->redirect('../../portal/cata-categories');

我使用 .load 将购物车页面注入我的仪表板的方式意味着我显然没有被重定向回它们来自的同一个 URL。它直接进入购物车页面，而不是在其中加载购物车页面的仪表板页面。

感觉有点傻，之前没有看到它，但它已经修复了！感谢大家的投入 - 一如既往地超级有帮助:)

【讨论】：