AJAX傳送和接收字串（案例實戰）

在 JavaScript 中，為 XMLHttpRequest 物件設定 responseType='text'，伺服器端響應資料是一個字串。

【範例】下面範例設計一個在頁面中顯示一個文字方塊和一個按鈕，在文字方塊中輸入字串之後，單擊頁面上的“傳送資料”按鈕，將使用 XMLHttpRequest 物件的 send() 方法輸入字串傳送到伺服器端，在接收到的伺服器端響應資料後，將該響應資料顯示在頁面上。

前台頁面

<script>
    function sendText () {
        var txt = document.getElementById("text1").value;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'test.php', true);
        xhr.responseType = 'text';
        xhr.onload = function (e) {
            if (this.status == 200) {
                document.getElementById("result").innerHTML = this.response;
            }
        };
        xhr.send(txt);
    }
</script>
<form>
    <input type="text" id="text1"><br />
    <input type="button" value="傳送資料" onclick="sendText()">
</form>
<output id="result"></output>

後台頁面

<?php
    $str = file_get_contents('php://input');
    echo '伺服器端接收資料：'.$str;
    flush();
?>

演示效果如圖所示：

---