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

您没有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参数...

Answer 2

我没有看到任何ID＆＃34; vakken＆＃34;，你必须改变：

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

致：

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

Answer 3

这里的问题是你在没有为你的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")});

获取数据并提交而不刷新页面

3 个答案: