ajax异步请求 进度条,jQuery.ajax请求进度条

我有一个AJAX请求，我在数据库中插入东西并发送2

电子邮件。我想展示AJAX请求的进度。

目前我尝试过：

$.ajax({

type: 'POST',

url: '/ajax/submit_order_form.php',

data: form_data,

xhr: function() {

var xhr = new window.XMLHttpRequest();

xhr.addEventListener('progress', function(e) {

if (e.lengthComputable) {

$('title').html((100 * e.loaded / e.total) + '%');

}

});

return xhr;

},

complete: function() { /*here some stuff*/ }

});

但是，它在请求期间不会更改标题，但在请求之后将其设置为100％。有什么方法可以得到我想要的东西吗？因此，当执行AJAX文件中的50％时，它会显示50％，并且会像这样进行。

接下来我尝试的是：

$.ajax({

type: 'POST',

url: '/ajax/submit_order_form.php',

data: form_data,

chunking: true,

xhr: function() {

var xhr = new window.XMLHttpRequest();

xhr.upload.addEventListener("progress", function(evt) {

if (evt.lengthComputable) {

var percentComplete = evt.loaded / evt.total;

$('title').html(percentComplete);

//Do something with upload progress here

}

}, false);

xhr.addEventListener("progress", function(evt) {

if (evt.lengthComputable) {

var percentComplete = evt.loaded / evt.total;

$('title').html(percentComplete);

//Do something with download progress

}

}, false);

return xhr;

},

complete: function (result){}});

然而，我只在标题中获得1，并且当我点击我的按钮并且调用AJAX时立即获得。

最后，我尝试了第二个答案：

$.ajax({

type: 'POST',

url: '/ajax/submit_order_form.php',

data: form_data,

chunking: true,

complete: function (result) {}

}).progress(function(e, part) {

console.log(part);

}).progressUpload(function()

{

});

然而，这给出了：

jq-ajax-progress.min.js:1 Uncaught TypeError: Cannot read property 'upload' of undefined

at Function.e.ajax (jq-ajax-progress.min.js:1)

at a.validator.submitOrderForm (checkout.js:108)

at d (jquery.validate.min.js:4)

at HTMLFormElement. (jquery.validate.min.js:4)

at HTMLFormElement.dispatch (jquery.min.js:3)

at HTMLFormElement.r.handle (jquery.min.js:3)

我已经尝试了很多东西，但似乎都没有用。