$ .ajax 제대로 작동하지 않음

Question

자바 스크립트 ajax 명령을 사용하여 PHP 스크립트로 양식 값을 보내려면 여러 가지 방법을 시도해 왔지만 (3 일이 걸렸습니다.), 내 페이지는 여전히 다시로드되고 아무것도 삽입되지 않습니다. 내 데이터베이스에. 나는 오류가 없으며, 스크립트는 실행되지만 아무 결과도 산출하지 않습니다. 이 게시물을 상대적으로 짧게 유지하려면이 pastebin에 HTML을 넣으십시오.

<?php 
if($_POST) { 
$link = mysqli_connect(localhost, <removed>, <removed>, <removed>); 

function val_data($data){ 
    $data = trim($data); 
    $data = strip_tags($data); 
    $data = mysqli_real_escape_string($link,$data); 
    return $data; 
} 

$type = val_data($_POST['type']); 
$size = val_data($_POST['size']); 
$date = val_data($_POST['datepicker']); 
$message = val_data($_POST['message']); 
$steam = val_data($_SESSION['steamid']); 
//Query 
$sql = "INSERT INTO requests (type, size, fdate, steam64id, message) VALUES ('$type', '$size', '$date', '$steam', '$message')"; 
$query = mysqli_query($link, $sql); 
mysqli_close($link); 
} 
?> 

가 여기 내 자바 스크립트입니다 :

function hideModal() { 
    $('#myModal').modal('hide'); 
} 

$(document).ready(function() { 
    $(document).on('submit', '#myModal', function() { 
     var error = ""; 
     var type = document.getElementById("type").val(); 
     var size = document.getElementById("size").val(); 
     var date = document.getElementById("datepicker").val(); 
     var message = document.getElementById("message").val(); 

     if(type == "") { 
     error = "A Job type is required"; 
     document.getElementById("sparam").innerHTML = error; 
     $("type").focus(); 
     return false; 
     } 

     if(size == "") { 
     error = "A Job size is required"; 
     document.getElementById("sparam").innerHTML = error; 
     $("size").focus(); 
     return false; 
     } 

     if(date == "") { 
     error = "A desired completion date is required"; 
     document.getElementById("sparam").innerHTML = error; 
     $("date").focus(); 
     return false; 
     } 

     if(message == "") { 
     error = "A description of the job is required"; 
     document.getElementById("sparam").innerHTML = error; 
     $("message").focus(); 
     return false; 
     } 

     $.ajax({ 
     type: 'post', 
     url: 'ajaxsubmit.php', 
     data: { 
      type:type, 
      size:size, 
      date:date, 
      message:message 
     }, 
     success: function(res) { 
      $('#sparam').html("Thanks! We'll be in touch soon"); 
      setTimeout(hideModal, 5000); 
     } 
     }); 
     return false; 
    }); 
    }); 

Answer 1

이 event.preventDefault()가 return false를 사용하는 것보다 더 안전 사용을 지적하는 좋은 사례이며, 또한 쉽게 디버깅 할 수 있습니다

여기 내 PHP 스크립트입니다.

$(document).on('submit', '#myModal', function(event) { 
     event.preventDefault(); 
     // form won't submit if errors thrown after this 

기능 내에서 양식을 제출하고 ... 페이지를 다시로드 브라우저를 반환하지 않는 경우는 false 나머지 코드를 차단하는 것 return false 이전에 발생됩니다 오류와 return 다른 모든 후이어야한다 , 이벤트 핸들러가 끝날 때

오류가 발생하면 페이지가 나오기 전에 즉시 콘솔에 충돌하고 콘솔이 지워지므로 디버그하기가 더 어렵습니다 ... 오류를 디버그하기가 더 어려워집니다.

기본값을 먼저 설정하지 않으면 C의 모든 오류 ode afterwords는 좋지 않지만 브라우저는 양식을 제출하지 않습니다. 콘솔이 삭제되지 않고 신속하게 오류를 발견 할 수 그러나

는

---

실제 문제 : 당신은 jQuery를위한 것입니다 val() 방법을 변경해야

하지 DOM이 value 또는 단순화하기 위해 노드 객체

var type = document.getElementById("type").val(); 

jQuery를

를 사용하여 DOM 검색 중 하나이어야한다 :

또는

var type = $("#type").val();