jquery - 表单导致链接无法正常工作？

Question

我正在开发一个电子商务网站，其中包含一些不可编辑的 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>

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

我尝试过的一件事(但不起作用):

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

感谢任何帮助!

Answer 1

你的表格是这样的

<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>

使用 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按钮，那么您必须将处理程序绑定(bind)到该链接的单击事件，例如

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

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

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

因为这段代码

$(this).attr('href')+'&'+$(this).closest('form').serialize()