Question

我的网站上有一个select表单，如下所示：

<div id="content_big">
    <div class="content_top_geel">
        Instuurlijnen
    </div>
    <div class="content_mid">   
        <div id="insturen">
            <select name="employee" id="employee" onchange="getIPL(this.value);">
                 <option value="">Instuurlijnen</option>
                 <option value="shout">Shout</option>
                 <option value="request">Request</option>
            </select>    
        </div>
    </div>
</div>

看起来非常基本。当用户选择一个我想调用PHP函数的选项时，由于这在JavaScript和jQuery中是不可能的，我决定使用AJAX：

function getIPL(verzoek)
    {
            $.ajax({
                       type: "GET",
                       url: "verzoek.php",
                       data: "verzoek =" + verzoek,
                       success: function(result){
                         $("#insturen").html(result);
                       }
                     });
    };

再次，看起来非常基本。更改值后，将获取以下文件：

<?php
  if(isset($_GET['verzoek'])){
     shoutofrequest($_GET['verzoek']);
 }
 function shoutofrequest($id)
 {
    if ($id === 'shout')
    {
        newShout();
    }
    elseif( $id === 'request')
    {
        newRequest();
    }
 }

 function newShout()
 {
    echo 'SHOUT<br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
 }

 function newRequest()
 {
    echo "REQUEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>";
 }
 ?>

这些功能仅用于测试。

所以这看起来不错，我认为，但是当我使用选择表单时，内容会跳开，我会看到白屏......

我犯了什么错误吗？

谢谢，罗宾。

Answer 1

正如英德拉所说，你需要把它移到底部。

但是，您的代码中有一些错误（这可能只是显示片段，但我正在解决它们。）

首先，

<select name="employee" id="employee" onchange="getIPL(this.value);">

应改为

<select name="employee" id="employee">

其次，你的js包含了verzoek的var，但是在任何地方都没有被调用。考虑到这一点，您的js代码应该更改为代表html选择代码中的更改，如此

$('#employee').on('change', function(){
    var verzoek = $(this).val();
    $.ajax({
        type: "GET",
        url: "verzoek.php",
        data: {verzoek : verzoek},
        success: function(result){
            $("#insturen").html(result);
        }
    });
});

示例jsfiddle显示没有onChange内联的select - http://jsfiddle.net/y8w02c4m/

在PHP代码中，你有shoutofrequest（$ id）函数。您实际上并没有创建$ id变量。经过上述更改后，您的php代码应如下所示

if(isset($_GET['verzoek'])) $id = $_GET['verzoek']);
if($id == 'shout'){
    echo 'SHOUT<br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
}elseif($id == 'request'){
    echo "REQUEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>";
}

无需将其全部加载到这样的简单显示的功能中，希望这有助于解决您遇到的问题！

Answer 2

尝试此功能

    <script>
    function getIPL(str)
    {
    if (str=="")
    {
    document.getElementById("insturen").innerHTML="";
    return;
    } 
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("insturen").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","verzoek.php?verzoek ="+str,true);
    xmlhttp.send();
    }
    </script>

将div id放在底部

    <div id="content_big">
    <div class="content_top_geel">
    Instuurlijnen
    </div>
    <div class="content_mid">   

    <select name="employee" id="employee" onchange="getIPL(this.value);">
    <option value="">Instuurlijnen</option>
    <option value="shout">Shout</option>
    <option value="request">Request</option>
    </select>    

    </div>
    <div id="insturen"> // Put it Here
    </div>
    </div>

如果你只是在测试......那就回声......去除多余的br

      echo "<p>Shout selected</p>";

使用AJAX在使用下拉表单后调用PHP函数

2 个答案: