node与ajax发送get请求进行数据交互

最新推荐文章于 2021-11-18 20:26:50 发布

原创

最新推荐文章于 2021-11-18 20:26:50 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #html #css #node.js

本文介绍了如何使用Node.js后端与前端Ajax技术进行GET请求的数据交互。前端通过JavaScript发起Ajax请求，而后端Node.js接收并处理请求，实现数据的交换。

前端页面:

<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <p id="p">
        --
    </p>
</body>

前端JavaScript:

<script>
    //获取按钮元素
    var btn=document.getElementById('btn');
    //获取div元素
    var div=document.getElementById('p')
    //获取输入框元素
    var username=document.getElementById('username');
    var age=document.getElementById('age');
    //设置按钮点击事件
    btn.onclick=function(){
        //创建ajax对象
        var xhr=new XMLHttpRequest();
        var uname=username.value
        var uage=age.value
        console.log(uname)
        //数据拼接
        var params='username='+uname+'&'+'age='+uage
        //配置ajax对象
        xhr.open('get','http://localhost:1234/get?'+p