Javascript/JQuery POST "url" 未定义（未定义）答案

【问题标题】：Javascript/JQuery POST "url" undefined (undefined)Javascript/JQuery POST "url" 未定义（未定义）
【发布时间】：2011-05-03 17:02:44
【问题描述】：

我已将 onlcick 事件附加到表单的提交按钮以覆盖默认的 POST 请求，但我无法让它工作。

我想要的是被点击的商品添加到购物车，但只显示模式确认而不刷新页面。

这段代码在我的静态示例中有效，但我在集成后所做的一些事情导致它崩溃。

function cartSubmit(addbtn)
{
var form = addbtn.parentNode.parentNode.parentNode; 
var formData = jQuery(form).serializeArray();
jQuery.post("/myurl/", formData, function(r){
jQuery.colorbox({html:'<div style="padding:10px;"><h2>Product added to cart.</h2></div>'});        
 });
 return false;
}

现在我在控制台中收到一个错误，说 POST "http://localhost/myurl/" undefined (undefined) 然后表单正常提交（刷新页面），但似乎也使用 javascript 提交，因为它添加了项目到购物车两次。

无论如何，非常感谢任何帮助！

【问题讨论】：

如果你关闭 Firebug，有什么作用吗？
在这里提出并回答了一个类似（不完全重复）的问题：stackoverflow.com/questions/3303874/…

标签： javascript jquery forms post form-submit

【解决方案1】：

您可以尝试通过提交事件将该函数绑定到表单，例如，假设您的表单具有 myform 的 id，将以下内容添加到您的文档中，您将不再需要提交按钮的 onclick 属性：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <form id="someform-123" method="post">
      <input type="text" id="field1" />
      <input type="submit" class="add_to_cart" value="Add" />
    </form>
    <hr>
    <form id="someform-789" method="post">
      <input type="text" id="field2" />
      <input type="submit" class="add_to_cart" value="Add" />
    </form>

    <script type="text/javascript">
      $('.add_to_cart').closest('form').submit(function(e) {
        e.preventDefault();
        alert('form id: ' + $(this).closest('form').attr('id'));
      });
    </script>
  </body>
</html>

【讨论】：

您需要在代码示例的第 6 行末尾添加一个 })。我会为你编辑它，但我没有足够的代表。
谢谢，已添加。他们在我的复制/粘贴中迷路了。
感谢您的回复！这正是我最初测试代码时所做的。问题是虽然表单是动态生成的“添加到购物车-##”（## 是产品的编号或某种类型的 ID）在这种情况下我将如何附加它？
举个简单的例子，我用两种形式编辑了我对一些基本 html 的回答。当您提交任一表单时，它会提醒持有单击按钮的表单的 ID。使用类似的技术，您应该能够替换 click 事件函数中的代码并让它执行您的 ajax 发布而不是警报。

【解决方案2】：

我遇到了同样的问题，AJAX 请求被中止。我已经在我的按钮上使用 return false 修复了它。如果您有（例如）：

<form method="post" action="">
Name: <input type="text" name="whatever" id="whatever" />
<input type="submit" id="join" value="Join" />
</form>

和

$("#join").click(function(){
  $.ajax({
    url: 'whatever.php',
    type: 'POST',
    data: 'name=' + $("#join").val(),
    success: function(r){ alert(r); }
  });
});

那将在whatever.php上有ABORT，要修复它，取消表单的提交，在按钮上添加一个return：

$("#join").click(function(){
  $.ajax({
    url: 'whatever.php',
    type: 'POST',
    data: 'name=' + $("#join").val(),
    success: function(r){ alert(r); }
  });
  return false;
});

【讨论】：