显示带有 onclick 事件的 toastR 以提交表单答案

【问题标题】：Show toastR with onclick event for form submit显示带有 onclick 事件的 toastR 以提交表单
【发布时间】：2016-04-25 19:23:26
【问题描述】：

我正在用 PHP 编写一个简单的商店（作为练习）。我想添加功能，当我单击提交按钮时，显示 ToastR：“产品已成功添加到购物车”。

我是 PHP 新手。

问题是，该表单被提交（并刷新页面）并且 toastR 没有机会显示。你能提出任何解决这个问题的方法吗？

示例代码：

<form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>">
    <div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
        <div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
        <div>
            <input type="text" name="quantity" value="1" size="2"/>
            <input id="addToCartButton" type="submit" value="Add to cart" class="btnAddAction" onclick="toastr.info('Page Loaded!')"/>
        </div>
</form>

我添加了所有必要的 css 和 js（toastR 在其他地方工作）

【问题讨论】：

通过 ajax 提交表单，并解析响应以显示 ToastR 通知？
能否请您写下关于如何通过 ajax 提交的答案？还是其他人？
这需要改变你的架构。您需要一个 API 端点来通过 ajax 发布“添加到购物车”信息。这可以用 PHP 编写。您还需要 JS 来进行 ajax 调用，并需要一些东西来解析响应。以下是一般操作方法：sitepoint.com/use-jquerys-ajax-function

标签： javascript php forms form-submit toastr

【解决方案1】：

$( "form" ).submit(function( event ) {
    event.preventDefault();
    $this = $(this);
    $.post($this.attr("action"), function( data ) {
        //manage data returned
        toastr.info('Page Loaded!');
    });
});

这是一个使用 jquery 发送 post ajax 调用的示例。然后在 php 目标文件中管理您的发布请求。完成那种post方法，here you have some examples你的toastr函数会在reload页面后被调用。

【讨论】：