首页 > 编程笔记 > JavaScript笔记 > Ajax 阅读:249

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();
?>
演示效果如图所示:

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章