【发布时间】：2018-04-04 14:18:51
【问题描述】：
我有一个页面，其中 Ajax 将视图加载到 Bootstrap 模式中，然后调用 jQuery.validate 并且这有效，但仅在第一个实例上。之后，当表单发生变化，并且 Ajax 调用中的 URL 发生变化时，它仍然会尝试 POST 到之前使用的 URL。
我已使用控制台确认 URL 已更改，我只是不明白为什么会这样，我以前从未遇到过这个问题，而且似乎只发生在 POST 请求中。
代码如下...
按下按钮并从 Laravel Blade 加载特定的模态视图，在本例中为选项视图 (/lead/options)
success: function(result) {
modal.form.attr('id', widget + 'Lead');
modal.load.html(result);
if(widget == 'update'){
modal.dialog.addClass('modal-lg');
modal.title.text("Edit Lead");
modal.save.text("Update Lead").removeClass('hide');
_validateModalForm(widget, modal, lead);
return false;
}
return false;
}
这会调用带有参数的_validateModalForm，代码如下：
_validateModalForm = function(formID, modal, lead){
console.log(formID);
var formID = formID;
var lead = lead || '';
var prevComplete = 0;
var formURL = 'leads';
if(lead != ''){
formURL = formURL + '/' + lead;
}
formURL = formURL + '/' + formID;
console.log(formURL);
console.log('form#' + formID + 'Lead');
$('form#' + formID + 'Lead').validate({
invalidHandler: function () { //display error alert on form submit
EMPGlobal.showAlert(modal.message, '', 'danger', 'There was an error, please check the form, correct, and try again.' , '', '', '', 'warning');
},
submitHandler: function (form){
var formData = new FormData($(form)[0]);
var fileUploadBar = $('#' + formID + 'LeadProgress div.progress-bar');
$.ajax({
url: formURL,
data: formData,
type: "POST",
dataType: "json",
cache: false,
contentType: false,
processData: false,
xhr: function(){
var xhr = new window.XMLHttpRequest();
fileUploadBar.parents('div.progress').removeClass('hide');
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.total / evt.loaded;
if( percentComplete > prevComplete){
//Do something with upload progress
fileUploadBar.css('width', percentComplete.toFixed(0) + '%');
prevComplete = percentComplete;
} else if( percentComplete == 1) {
fileUploadBar.css('width', '100%');
}
}
}, false);
return xhr;
},
success: function (result) {
EMPGlobal.showAlert('', '', 'success', result, '', '', '', 'success');
$('form#' + formID + 'Lead').validate('destroy');
modal.show.modal('toggle');
return false;
},
error: function (jqXHR, textStatus, errorThrown) {
var returnMes = $.parseJSON(jqXHR.responseText);
var messages = '';
$.each(returnMes, function(i,v){
messages = messages + v + '<br>';
});
returnMes = messages;
message = 'A ' + jqXHR.status + ' ' + errorThrown + ' error occured. <br> <i>Message Details: <br> ' + returnMes + '</i>';
EMPGlobal.showAlert(modal.message, '', 'danger', message, '', '', '', 'warning', jqXHR.status);
if(fileUploadBar.length){
fileUploadBar.css('width', '0%');
fileUploadBar.parents('div.progress').addClass('hide');
}
},
});
return false;
}
});
}
这行得通。模态关闭，如果这次我按下发送按钮...
if(widget == 'send'){
modal.dialog.addClass('modal-md');
modal.title.text("Send Permission Form");
modal.save.text("Send");
_validateModalForm(widget, modal, lead);
return false;
}
然后再次按表单上的提交，然后尝试发布到 /leads/{leadid}/update
这是控制台中上述步骤的输出，根据 console.log 行：
update
leads.js:192 leads/1xXpM0O7PYO/update
leads.js:193 form#updateLead
leads.js:183 send
leads.js:192 leads/1xXpM0O7PYO/send
leads.js:193 form#sendLead
VM5400:1 POST http://ml.energynet.app/sales/leads/1xXpM0O7PYO/update 400 (Bad Request)
(anonymous) @ VM5400:1
send @ jquery-1.11.0.min.js:4
ajax @ jquery-1.11.0.min.js:4
submitHandler @ leads.js:201
d @ VM5441:4
(anonymous) @ VM5441:4
dispatch @ jquery-1.11.0.min.js:3
r.handle @ jquery-1.11.0.min.js:3
关于造成这种情况的任何想法？这也可以按任何顺序发生，比如我先发送，然后更新，我遇到更新试图发布到 /send
希望这已经足够清楚了。如果没有，请告诉我，我会尽量把它说得更清楚。
【问题讨论】：
标签： php jquery ajax laravel-5.4 blade