Ajax请求被附加在多个匹配上 [英] Ajax requests getting appended on multiple hits

问题描述

如果用户填写了一些无效数据，则会触发ajax请求并显示错误消息。现在，当用户再次纠正数据/或再次输入无效数据时，会发起2次请求，下次3次并继续累计。

这个可能是因为欧芹js库。

以下是ajax代码

<$ p'p> $（'＃upload-profile-button'）。on（'click'，function（e）{
$（＃upload-profile-form）。parsley （）。validate（）;
$（＃upload-profile-form）。parsley（）。on（'form：validate'，function（formInstance）{
var isFormValid = formInstance.isValid （）;
if（isFormValid）{
e.preventDefault（）;
$（'＃upload-profile-button'）。html（'Uploading ...'）;
var fd = new FormData（$（＃upload-profile-form）[0]）;
$ .ajax（{
type：'POST'，
url：' / mbatch / batch / uploadBatch'，
data：fd，
processData：false，
contentType：false，
beforeSend：function（）{

}，
success：function（response）{
if（response.data.fetchTpodSu ccess == true）{
window.location.href =/ mbatch / batch / listBatch;
} else {
new PNotify（{
title：'Notice'，
text：response.message，
type：'error'，
styling ：'bootstrap3'
}）;
$（'＃upload-profile-button'）。html（'Submit'）;


错误：function（data）{
new PNotify（{
title：'Notice'，
text：JSON.parse（ data.responseText）.message，
类型：'error'，
样式：'bootstrap3'
}）;
$（'＃upload-profile-button'）。html（'Submit'）;
}
}）;
}
}）;
}）;


以下是HTML代码片段

 < button id =upload-profile-buttontype =button
 class =btn btn-primary>提交< / button> 
  

任何潜在客户都将非常感激。

解决方案

我刚刚发现了解决方案。
这是因为我在表单标记中使用了data-parsley-validate以及
，并在js中使用了数据 - parsley-validate

 < form id =upload-profile-formdata-parsley-validate enctype =multipart / form-data
 name =uploadBatchForm
 class =form-horizo​​ntal form-label-left
> 
  

Parsley在文档加载中查看DOM中的所有数据 - parsley-验证事件，并自动绑定他们如果有效。
一旦表单或字段实例被Parsley绑定，执行$（'＃form'）。parsley（options）;将更新现有选项，但不会替换它们。

来源 - http://parsleyjs.org/doc/index.html

In case the user fills some invalid data, an ajax request is fired and error message is displayed. Now when the user again corrects the data/or enters invalid data again, 2 requests are fired, the next time 3 and it keeps on adding up.

This is probably because of the parsley js library. If I remove parsley code it works fine. Any idea?

Here is the ajax code

    $('#upload-profile-button').on('click', function(e) {
        $("#upload-profile-form").parsley().validate();
        $("#upload-profile-form").parsley().on('form:validate', function (formInstance) {
            var isFormValid = formInstance.isValid();
            if(isFormValid){
        e.preventDefault();
        $('#upload-profile-button').html('Uploading...');
        var fd = new FormData($("#upload-profile-form")[0]);
        $.ajax({
            type : 'POST',
            url : '/mbatch/batch/uploadBatch',
            data : fd,
            processData : false,
            contentType : false,
            beforeSend : function() {

            },
            success : function(response) {
                if (response.data.fetchTpodSuccess == true) {
                    window.location.href= "/mbatch/batch/listBatch";
                } else {
                    new PNotify({
                        title: 'Notice',
                        text: response.message,
                        type: 'error',
                        styling: 'bootstrap3'
                    });
                        $('#upload-profile-button').html('Submit');
                }
            },
            error : function(data) {
                new PNotify({
                    title: 'Notice',
                    text: JSON.parse(data.responseText).message,
                    type: 'error',
                    styling: 'bootstrap3'
                });
                    $('#upload-profile-button').html('Submit');
            }
        });
}
             });
   });

Here is the HTML code snippet

    <button id="upload-profile-button" type="button"
                                    class="btn btn-primary">Submit</button>

Any leads would be highly appreciated.

解决方案

I just found out the solution. This was because I was using data-parsley-validate in the form tag as well and in the js as well

    <form id="upload-profile-form" data-parsley-validate enctype="multipart/form-data"
                        name = "uploadBatchForm"
                        class="form-horizontal form-label-left"
                        >

Parsley looks at all data-parsley-validate occurrences in DOM on document load and automatically binds them if valid. Once a form or field instance is bound by Parsley, doing $('#form').parsley(options); will update the existing options but not replace them.

Source - http://parsleyjs.org/doc/index.html

这篇关于Ajax请求被附加在多个匹配上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！