Question

我使用http://api.jquery.com/jquery.post/来帮助我构建一个jQuery函数来将一个项添加到购物车。

我的结果是这样，它的确有效：

jQuery(document).ready(function() {

// Attach a submit handler to the form
$('form[name="cart_quantity"]').submit(function( event ) {

// Stop form from submitting normally and initiate function
event.preventDefault();
return addtocart(jQuery(this));

}); // eof Attach a submit handler to the form

// function
function addtocart(thisForm) {

// Get some values from elements on the page:
$("#contentss").fadeIn("slow");
action = thisForm.attr("action");

// Send the data using post
var posting = $.post( action, thisForm.serialize());

// Process post-results
posting.done(function(data) {

// find and put results in a div
var shoppingCartSidebox = $(data).find('div#shoppingcart').html();
var numbernotify = $(data).find('div.numbernotify').html();
$('div#shoppingcartdiv').html(shoppingCartSidebox);
$('div.numbernotify').html(numbernotify)

// initiate slideDown / slideUp
$(document.getElementById('contentss').style.display='none');
jQuery(document).ready(function() {
$("#shoppingcartdiv").slideDown();
setTimeout(function() {$("#shoppingcartdiv").slideUp()}, 7000);

}); // eof initiate slideDown / slideUp document ready
}); // eof Process post-results
} // eof function
}); // eof main document ready

我想在产品没有添加到购物车的瞬间实施成功/失败事件。成功事件已经编码，基本上由事件定义，后跟“//处理后结果”

所以我需要插入一个包含与Success类似结果的Fail事件，但当然不是警告用户该项已成功添加，它会警告他们发生了错误。但是我只想问一下，在这种情况下会添加一个Fail事件启动，例如，用户在将项目添加到购物车时丢失了他的互联网连接？因为那就是我正在寻找的......

此外，我认为我是一个非常可怕的业余人士，因此对当前代码和改进的任何建议都将受到高度赞赏。

Answer 1

JQuery ajax回调函数

更多信息：http://api.jquery.com/jquery.post/

var jqxhr = $.post( "example.php", function() {
alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" ); // if something goes wrong
  })
  .always(function() {
    alert( "finished" ); // will always be executed, regardless of success or failure
});

Answer 2

Aman在评论中的代码工作和他的后续答案似乎是更简单的解决方案和更正式的解决方案 - 但对于其他任何人将使用我的业余代码，这是最终结果根据阿曼的评论：

jQuery(document).ready(function() {

// Attach a submit handler to the form
$('form[name="cart_quantity"]').submit(function( event ) {

// Stop form from submitting normally and initiate function
event.preventDefault();
return addtocart(jQuery(this));

}); // eof Attach a submit handler to the form

// function
function addtocart(thisForm) {

// Get some values from elements on the page:
$("#contentss").fadeIn("slow");
action = thisForm.attr("action");

// Send the data using post
var posting = $.post( action, thisForm.serialize());

// Process post-results request Success
posting.done(function(data) {

// find and put results in a div
var shoppingCartSidebox = $(data).find('div#shoppingcart').html();
var numbernotify = $(data).find('div.numbernotify').html();
$('div#shoppingcartdiv').html(shoppingCartSidebox);
$('div.numbernotify').html(numbernotify)

// initiate slideDown / slideUp
$(document.getElementById('contentss').style.display='none');
jQuery(document).ready(function() {
$("#shoppingcartdiv").slideDown();
setTimeout(function() {$("#shoppingcartdiv").slideUp()}, 7000);

}); // eof initiate slideDown / slideUp document ready
}); // eof Process post-results

// Process post-results request Fail
posting.fail(function(data){
$(document.getElementById('contentss').style.display='none');
alert ("Failed");
}); // eof Process post-results request Fail

// Process post-results request Success & Fail
posting.always(function(data){
$("html, body").animate({ scrollTop: 0 }, "slow");
}); // eof Process post-results request Success & Fail

} // eof function
}); // eof main document ready

我在posts.fail和posts.always中使用的函数当然是（现在）测试的占位符 - 并且最终会对用户提供一些用户友好的提醒，以提醒他们某些事情＆＃39;出了问题。另外，为了回答我自己的初始问题的一部分，当我在WAMP服务器上拔下插头并尝试将产品添加到购物车时，这很有效，所以我假设它可以用于丢失的互联网连接。

Answer 3

我不喜欢jQuery的承诺实施（我是not the only one）。在这种情况下，我的理由是：

var jqxhr = $.post( "example.php")
.done(function(data) {
  // You can get your data, but...
})
.fail(function() {
  // What is the error? Do I get a code? jQuery docs don't say...
  alert( "error" );
})

一般来说，我更喜欢在jQuery中使用AJAX请求的长手语法。 $.post方法是shorthand method，据说可以让开发人员更轻松。但它通过隐藏某些配置选项来实现这一点（在将应用程序部署到真实服务器之前，我几乎总是需要长时间的经验）。

所以我更喜欢$.ajax方法，该方法公开了非常有用的错误处理程序error和statusCode。因此，您可以按以下方式重写代码：

$.ajax({
    type: 'POST',
    url: this.Form.attr("action"),
    data: this.Form.serialize(),
    success: function(data) {
        // The rest of your success function
        // i.e. from posting.done
    },
    error: function(xhrReq, textStatus, errorThrown) {
        // The rest of your error handling code
        // i.e. from posting.fail
        // You can also retry the request or report the specific error
    },
    statusCode: // notice: statusCode singular
    {
        // Plain object syntax with integer status codes as the keys
        403: function() {
            alert("403 Forbidden. You do not have permission for this action.");
        },
        500: function() {
            alert("500 Internal Server Error. Try again later.");
        }
    }
});

文档说明error处理程序：

错误
  键入：Function（jqXHR jqXHR，String textStatus，String errorThrown）
  请求失败时要调用的函数。该函数接收三个参数：jqXHR（在jQuery 1.4.x，XMLHttpRequest中）对象，描述发生的错误类型的字符串和可选的异常对象（如果发生）。第二个参数的可能值（除了null）是＆＃34;超时＆＃34;，＆＃34;错误＆＃34;，＆＃34;中止＆＃34;和＆＃34; parsererror＆＃34;。发生HTTP错误时，errorThrown会收到HTTP状态的文本部分，例如＆＃34; Not Found＆＃34;或＆＃34;内部服务器错误。＆＃34;从jQuery 1.5开始，错误设置可以接受一系列函数。每个函数将依次调用。 注意： 不会为跨域脚本和跨域JSONP请求调用此处理程序。这是一个Ajax事件。

关于statusCode处理程序：


statusCode （默认：{}）
  类型：PlainObject
  当响应具有相应代码时要调用的数字HTTP代码和函数的对象。例如，当响应状态为404时，以下内容将发出警报:(见上文）

如果请求成功，则状态码函数采用与成功回调相同的参数;如果它导致错误（包括3xx重定向），则它们采用与错误回调相同的参数。

那就是说，如果你有一个有效的解决方案，一定要去做。但请记住，如果您的编程要求变得更加复杂，那么训练轮就必须脱落。

包括jQuery / Ajax功能的成功/失败

3 个答案: