如何從輸入中獲取值並使AJAX產生響應

我希望用戶在文本字段中輸入值。然後，根據輸入到文本字段中的內容，向php文件發出請求，該文件將生成輸入的特定狀態的簡要說明。如何從輸入中獲取值並使AJAX產生響應

這是我的。

<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方法。

來源

2017-02-27 Ryan

你能描述一下哪些工作沒有成功嗎？？ – shofstetter

@shofstetter如何獲得與switch語句對應的輸入值...即輸入California，加州的信息將顯示 – Ryan

而不是案例1：'放入案例'California'：'等等等等 – eeetee

您可以添加新的JavaScript函數sendData()它獲取通過提交按鈕的onclick事件觸發：

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

該函數讀取輸入元素的值並調用您的getData（）函數。

你還需要給你的輸入元素的ID：

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

然後你需要調用新的功能，當提交按鈕被點擊：

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

來源

2017-02-27 21:31:26 shofstetter

我寧願使用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>

來源

2017-02-27 21:49:44

如何從輸入中獲取值並使AJAX產生響應

回答

相關問題