Ajax 호출을 만들고 .NET을 사용하여 크롬에서 성공 및 실패를 디버깅하려고했습니다 debugger;.
첫 번째 디버거 문은 제대로 작동하지만 두 번째 디버거 문에서 흐름이 중지되지 않고 대신 소스 패널에 다음이 표시됩니다.
<script type="text/javascript" id="debugbar_loader" data-time="1611085354" src="http://localhost/my_project/public/?debugbar"></script><script type="text/javascript" id="debugbar_dynamic_script"></script><style type="text/css" id="debugbar_dynamic_style"></style>
Ajax는 서버에서 POST 데이터를 수신함에 따라 제대로 작동합니다. 친절하게 조언하십시오.
<form action="#" method="POST">
<button type="submit" name="submit_form" class="btn" id="submit_form">Save Changes</button>
</form>
$(document).ready(function() {
// First Debugger
debugger;
$("#submit_form").submit(function(e) {
e.preventDefault();
var fd = new FormData($(this)[0]);
// Second Debugger
debugger;
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
dataType: 'json',
data: fd,
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
},
});
});
});
문제는 submit이벤트가 선택한 form요소가 아니라 요소에서 발생 하기 때문 button입니다.
실제로 전체 submit핸들러는 참조를 사용하고 생성자에 전달하는 this경우 form요소 를 참조 한다고 가정합니다 .attr('action')FormData()
또한 그런 다음 AJAX 요청에 FormData를 보내는 경우도 포함 할 필요가 있습니다 processData: false및 contentType: falseAJAX를 옵션에서.
말한대로 다음을 시도하십시오.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" id="submit_form">
<button type="submit" name="submit_form" class="btn">Save Changes</button>
</form>
$(document).ready(function() {
console.log('A'); // debugger
$("#submit_form").submit(function(e) {
e.preventDefault();
var fd = new FormData(this);
var url = this.action;
console.log('B'); // debugger
$.ajax({
type: "POST",
url: url,
dataType: 'json',
data: fd,
contentType: false,
processData: false,
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
}
});
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다