Javascript/JQuery POST“url”未定义（未定义）

发布于 2024-11-05 00:29:38 字数 646 浏览 3 评论 0原文

我已将 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 (未定义)，然后表单正常提交（刷新页面），但似乎也使用 javascript 提交，因为它将项目添加到购物车两次。

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

原文

I've attached an onlcick event to a form's submit button to override the default POST request, but I'm having some trouble getting it to work.

What I want is for the item clicked to add to the shopping cart, but only show a modal confirmation and not refresh the page.

This code was working in my static example but something I've done since integrating it has made it break.

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

Now I get an error in console saying POST "http://localhost/myurl/" undefined (undefined) then the form submits normally (refreshes the page), but seems also to submit with the javascript because it adds the item to the cart twice.

Anyway, any help is greatly appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆凄美了谁 2024-11-12 00:29:38

您可以尝试通过提交事件将该函数绑定到表单，例如，假设您的表单有一个 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>

You could try binding that function to the form through the submit event, for example, assuming your form has an id of myform add the following into your document ready, and you wont need the onclick attribute of your submit button anymore:

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

回复收藏 0 原文

留一抹残留的笑 2024-11-12 00:29:38

我遇到了同样的问题，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); }
  });
});

什么.php 都会有 ABORT 要修复它，请取消表单的提交，在按钮上添加返回：

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

I was having the same issue, an aborted AJAX request. I've fixed it using a return false on my button.
If you have (for example):

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

And

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

That will have the ABORT on whatever.php To fix it, cancel the submission of the form, adding a return on the button:

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

回复收藏 0 原文

~没有更多了~