獲取數據並無刷新頁面提交

////////////////// 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，但我無法讓它工作！

來源

2016-04-23 rickkorsten

什麼是你所得到的問題？ –

當您使用AJAX從服務器獲取數據時，您應該在div或輸入中顯示該數據。所以你可以在服務器端構建HTML，而JS會在客戶端更新它而不刷新頁面。 – robot9706

它不起作用。當我按下按鈕時他會刷新，但它也不會顯示我的東西。 – rickkorsten

的問題是，你沒有指定一個數據類型爲你的AJAX返回HTML調用，在我的經驗中默認爲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")});

來源

2016-04-23 14:08:05

它不會失敗。但我仍然沒有得到正確的結果。這是問題，我有JS和PHP在同一頁面「prototype.php」？ – rickkorsten

在php $ vak doest中獲得一個值 – rickkorsten

你沒有使用id = 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參數...

來源

2016-04-23 14:05:38

現在它給了我警報中的正確值。現在我想給php代碼賦值，所以我可以把它放在我的查詢中。 – rickkorsten

我沒有看到任何ID「vakken」，你必須改變：

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

要：這裏

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

來源

2016-04-23 14:06:33 voodoo

獲取數據並無刷新頁面提交

回答

相關問題