Получить данные и отправить, не обновляя страницу

Question

////////////////// Jquery AJAX submit zonder te refreshen /////////////////////////// 

      function submitdata() { 
       var vakken = document.getElementById("vakken").value; 
       var dataString = 'vakken=' + vakken; 

        // AJAX 
        $.ajax({ 
         type: "POST", 
         url: "prototype.php", 
         data: dataString, 
         cache: false, 
         success: function(html) { 
          alert(html); 
         } 

        }); 

       return false; 

      } 

что здесь не так? ///////////////////////////////////////////////// /////////////////////////////////

<form id="selector" action="prototype.php" method="post" enctype="multipart/form-data"> 
         <select name="vakken"> 

          <option value="DED">VAK: DED </option> 
          <option value="UXU">VAK: UXU </option> 
          <option value="SCO">VAK: SCO </option> 
          <option value="PO">VAK: PO </option> 
    </select> 
         <button type="button" onClick="submitdata();">Submitii</button> 
        </form> 
       </div> 

       <div id="vlakkencontainer"> 
        <?php 
    // recieve data 
        if(isset($_POST['vakken'])) { 
         $vak = $_POST['vakken']; 
         echo $vak; 
         $sqldedquery = mysqli_query($con, "SELECT * FROM `opdracht` WHERE `vak` = '" . $vak . "'"); 
         $vlakid = 0; 
         while ($row = mysqli_fetch_array($sqldedquery)) { 

          $afbeelding = $row['afbeeldingnaam']; 
          $pdf = $row['pdfnaam']; 
          $naamopdracht = $row['opdrachtnaam']; 

          echo '<a id="vakhover" href="../../../db/' . "$pdf" . '"><div class="vlak" id=' . "$vlakid++" . '> 
      <img src="../../../db/' . $afbeelding . '"><div id="naamopdracht">' . $naamopdracht . '</div> 
     </div></a>'; 
         } 
        } ?> 

, как я могу получить эти данные из моей БД без обновления страницы. Я попробовал ajax, но я не мог заставить его работать!

Answer 1

Проблема здесь состоит в том, что вы возвращаете HTML без указания типа данных для AJAX вызов, который по моему опыту по умолчанию соответствует JSON, который явно не соответствует вашему ответу. Это помогает иметь обработчик обратного вызова сбоя, чтобы проверить, не ошибается ли то, что вы делаете.

Проверьте, добавив в вашей функции AJAX фиксирует вещи

  $.ajax({ 
        type: "POST", 
        url: "prototype.php", 
        data: dataString, 
        cache: false, 
        //This is new 
        dataType: "html", 
        success: function(html) { 
         alert(html); 
        } 
       }).fail(function(){alert("Something has gone terribly wrong")}); 

Answer 2

у вас нет элемента с идентификатором = vakken, замените ваш выбор из

<select name="vakken"> 

в

<select name="vakken" id="vakken"> 

он работает отлично

<form id="selector" action="prototype.php" method="post" enctype="multipart/form-data"> 
    <select name="vakken" id="vakken"> 

     <option value="DED">VAK: DED </option> 
     <option value="UXU">VAK: UXU </option> 
     <option value="SCO">VAK: SCO </option> 
     <option value="PO">VAK: PO </option> 
    </select> 
    <button type="button" onClick="submitdata();">Submitii</button> 
</form> 

<script> 

      function submitdata() { 
       var vakken = document.getElementById("vakken").value; 
       alert(vakken); 
      } 
</script> 

после этого PHP скрипт может обрабатывать vakken ...

Answer 3

Я не вижу идентификатор «vakken», вы должны изменить:

var vakken = document.getElementById("vakken").value; 

To:

var vakken = document.getElementsByName("vakken").value;