从ajax加载数据

时间:2017-07-01 10:02:08

标签: php ajax

我有以下代码,我想用它来生成一个页面,我从下拉菜单中选择一个选项,然后选择的html应该加载,但是现在它没有加载。

<form>
    <fieldset>
        <legend>Select transaction type:</legend>
        <select name="stakeholders" onchange="fetchStakeholder(this.value)">
            <option value="">Select a Stakeholder:</option>
            <option value="CHALS">CHALS</option>
            <option value="juggernaut">juggernaut</option>
            <option value="STFU CHALS">STFU CHALS</option>
        </select>

        <script type="text/javascript">
            function fetchStakeholder(name) {
                if(name.length ==0){
                    return;
                }
                var request = new XMLHttpRequest();
                request.onreadystatechange=function(){
                    if(request.readyState==4 && request.status == 200){
                        document.getElementById("stakeholder").innerHTML=
                                request.responseText;
                    }

                }

                request.open("POST","stakeholder.php",true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                request.send("stakeholder=" + name);
            }


        </script>

    </fieldset>
</form>

然后在PHP文件中:

<?php
    if($_SERVER["REQUEST_METHOD"] == "POST" ){
        $stakeholder = $_POST["stakeholder"];
        if($stakeholder === "CHALS"){
            include("CHALS.html");
        }elseif ($stakeholder === "juggernaut"){
            include("CHALS.html");
        }elseif ($stakeholder === "STFU CHALS"){
            include("STFU.html");
        }    
    }
?>

1 个答案:

答案 0 :(得分:1)

你没有得到任何东西,因为你没有身份stakeholder的元素。此元素可以是divspaninputselect。我在这里使用div

<form>
    <fieldset>
        <legend>Select transaction type:</legend>
        <select name="stakeholders" onchange="fetchStakeholder(this.value)">
            <option value="">Select a Stakeholder:</option>
            <option value="CHALS">CHALS</option>
            <option value="juggernaut">juggernaut</option>
            <option value="STFU CHALS">STFU CHALS</option>
        </select>
        <div id="stakeholder"></div>

        <script type="text/javascript">
            function fetchStakeholder(name) {
                if(name.length ==0){
                    return;
                }
                var request = new XMLHttpRequest();
                request.onreadystatechange=function(){
                    if(request.readyState==4 && request.status == 200){
                        document.getElementById("stakeholder").html=
                                request.responseText;
                    }

                }

                request.open("POST","stakeholder.php",true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                request.send("stakeholder=" + name);
            }


        </script>

    </fieldset>
</form>