1

我正在开发一个包含一些不可编辑的 HTML 的电子商务网站。他们提供的功能之一是“快速”添加到购物车按钮，当您单击它时，您会留在页面上，但会弹出一个小窗口，显示您的购物车内容，包括您刚刚添加的项目。我编写了一个小脚本，当显示在产品类别列表中时，将这个快速添加链接添加到所有产品，但是当您单击此链接时，它会将您发送到实际的购物车页面，而不会打开迷你窗口。

我认为这正在发生，因为它在一个表格中。我可能是错的，但这是我能想到的唯一原因。相关的HTML：

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);">
   <!-- other stuff -->
      <a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a>
   <!-- other stuff -->
</form>

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a>

这两个链接完全相同，但是当我单击表单底部底部的链接时，它会执行我想要的操作，即让您留在页面上，但会打开迷你购物车窗口。表格中的那个，在产品本身上，把我带到了不同的页面。有没有人知道为什么会发生这种情况，或者我能做些什么来解决它？

我尝试过的一件事（但不起作用）：

$(document).ready(function(){
   var $form = $('form[action="/searchresults.asp"]');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            //
      },'json');
      return false;
   });
});

任何帮助表示赞赏！

4

2 回答 2

2

你的表格是这样的

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);">

删除onsubmit="return OnSubmitSearchForm(event, this);并使用以下代码

$(document).ready(function(){
    $('#MainForm').submit(function(e){
        e.preventDefault();
        $.post($(this).attr('action'), $(this).serialize(), function(response){
            console.log(response)
      },'json'); // you suppose to return json from the server
    });
});

由于您在表单 ( ) 中有一个 id，MainForm因此最好在代码中以这种方式使用它e.preventDefault();，这样可以防止表单提交的默认行为（停止提交）。

更新：

此外，在表单中，您有一个a标签，例如

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a>

改用 a button/submit，这是您的代码中导航到另一个页面而不是表单提交的主要问题。让你的表格看起来像

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp">
    <!-- other stuff -->

    <input type="submit" class="addit" name="btn_sub"  />
</form>

更新：

如果您无法编辑表单并且需要使用<a>标签而不是submit按钮，那么您必须将处理程序绑定到该链接的单击事件，例如

$('#MainForm a.addit').click(function(e){
    e.preventDefault();
    $.get($(this).attr('href')+'&'+$(this).closest('form').serialize(), function(response){
        console.log(response)
    },'json');
});

而且，在服务器端，从$_GET数组中获取值，因为您在标签 ( ) 中使用params您的 url ，所以只需将序列化的表单数据添加到当前的末尾并避免（如果没有必要）。所以，你的最终会看起来像<a>href="/ShoppingCart.asp?ProductCode=BBB-DWCB"urlposturl

/ShoppingCart.asp?ProductCode=BBB-DWCB&forminput1=value1&forminput2=value2

因为这段代码

$(this).attr('href')+'&'+$(this).closest('form').serialize()
于 2013-09-27T20:38:15.160 回答
1

如果您将表单提交回自身，则无需指定操作：

<form name="MyForm" method="post" action="" ...>
于 2013-09-27T20:37:56.673 回答