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

最新推荐文章于 2024-11-30 13:48:29 发布

zengMoodFF

最新推荐文章于 2024-11-30 13:48:29 发布

阅读量251

点赞数

文章标签： ajax javascript jquery node.js

本文链接：https://blog.youkuaiyun.com/zengMoodFF/article/details/120826392

版权

前端页面：

<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('post','http://localhost:1234/post')
        //设置请求参数格式的类型(post请求必须要设置)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        //发送请求
        xhr.send(params);
        //监听服务器端发送来的数据
        xhr.onload=function(){
            console.log(xhr.responseText)
            div.innerText=xhr.responseText
        }
    }
</script>

后端代码：

var express=require('express');
var fs=require('fs');
//使用模块
var app=express()
//设置中间件
app.use(express.json())
app.use(express.urlencoded({extended:false}))
//配置路由
app.get('/',function(request,response){
        response.redirect('/a')
})
app.get('/a',function(request,response){
        fs.readFile('post.html','utf8',function(error,data){
            response.send(data.toString())
        })
})
//配置ajax接受客户端参数
app.post('/post',function(request,response){
    //发送给客户端
       response.send(request.body);
       console.log(request.body)
})
app.listen(1234,function(){
    console.log('服务器已开启');
})