Question

我希望用户在文本字段中输入值。然后根据输入到文本字段的内容，请求php文件，该文件将生成输入的特定状态的简短描述。

这就是我所拥有的。

<html>
<head>
<script>
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest)
    {
        XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

    function getData(dataSource, divID)
    {
        if (XMLHttpRequestObject)
        {
            var obj = document.getElementById(divID);
            obj.innerHTML = "";
            XMLHttpRequestObject.open("GET", dataSource);
            XMLHttpRequestObject.onreadystatechange = 
                function()
                {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
                    {
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                    }
                }
                XMLHttpRequestObject.send(null);
        }
    }
    </script>

<form>
        <p>Enter State:</p>
        <input type="text" name="State">
        <br>
        <br>

      <input type="button" value="Submit" onclick="getData('k5a.php?state=2', 'targetDiv')">
</form>

<div id="targetDiv">
    <p>The state Info will appear here.</p>

    </div

所以php文件看起来像

<?php
    header("Cache-Control: post-check=1, pre-check=2");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");

    $choice = $_GET['state'];



    switch ($choice)
    {
            case 1:
                echo "California is the most populous state in the United States and the third most extensive by area. Located on the western (Pacific Ocean) coast of the U.S., California is bordered by the other U.S. states of Oregon, Nevada, and Arizona and shares an international border with the Mexican state of Baja California.";
                break;

            case 2:
                echo "Florida is a state located in the southeastern region of the United States. It is bordered to the west by the Gulf of Mexico, to the north by Alabama and Georgia, to the east by the Atlantic Ocean, and to the south by the Straits of Florida and Cuba. Florida is the 22nd most extensive, the 3rd most populous, and the 8th most densely populated of the U.S. states.";
                break;

            case 3:
                echo "New York is the most populous city in the United States. With an estimated 2015 population of 8,550,405 distributed over a land area of about 302.6 square miles. New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world.";
                break;

    }
    ?>

我希望输出是用户输入的任何状态的信息。我一直坚持如何使用switch语句/ onclick方法。

Answer 1

您可以添加一个新的javascript函数sendData()，该函数由提交按钮的onclick事件触发：

<script>
...
function sendData(){
    getData('k5.php?state='+document.getElementById("state_input").value, 'targetDiv');
}
</script>

此函数读取input元素的值并调用getData（）函数。

您还需要为input元素指定一个id：

<input type="text" name="State" id="state_input">

然后，您需要在单击提交按钮时调用该新功能：

<input type="button" value="Submit" onclick="sendData();">

Answer 2

我更愿意使用select列表来确保用户选择有效的选项。

<p>Select State:</p>
<select id="states">
    <option value="1">California</option>
    <option value="2">Florida</option>
    <option value="3">New York</option>
</select>

然后，为了使您的getData功能灵活用于其他用途，请将所选选项作为第三个参数传递，而不是硬编码的查询字符串URL。

<input type="button" value="Submit" onclick="getData('k5a.php?state=', 'targetDiv', 'states')">

在你的函数中，抓取所选的值，如下所示：

var select = document.getElementById(selector);
var state = select.options[select.selectedIndex].value;

最后使用ID

附加您的网址查询字符串

XMLHttpRequestObject.open("GET", dataSource + state);

全部放在一起：

<html>
<head>
<script>
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest)
    {
        XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }


    // declare extra selector parameter
    function getData(dataSource, divID, selector)
    {
        if (XMLHttpRequestObject)
        {

            // get selected option
            var select = document.getElementById(selector);
            var state = select.options[select.selectedIndex].value;

            var obj = document.getElementById(divID);
            obj.innerHTML = "";

            // append URL query string
            XMLHttpRequestObject.open("GET", dataSource + state);
            XMLHttpRequestObject.onreadystatechange = 
                function()
                {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
                    {
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                    }
                }
                XMLHttpRequestObject.send(null);
        }
    }
</script>
<body>
<form>

    <!-- use a select list -->
    <p>Select State:</p>
    <select id="states">
        <option value="1">California</option>
        <option value="2">Florida</option>
        <option value="3">New York</option>
    </select>

        <br>
        <br>

    <!-- pass that value into function -->
    <input type="button" value="Submit" onclick="getData('k5a.php?state=', 'targetDiv', 'states')">
</form>

<div id="targetDiv">
    <p>The state Info will appear here.</p>

</div>
</body>
</html>

如何从输入中获取价值并让AJAX产生响应

2 个答案: