node(表单提交get，post)

最新推荐文章于 2024-07-19 10:03:45 发布

小鑫-star

最新推荐文章于 2024-07-19 10:03:45 发布

阅读量677

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/qq_43390721/article/details/86583308

版权

node 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

新建文件demo.js , hello.js，index.html

get方法请求：

demo.js代码如下

const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')

http.createServer((req, res) => {
    //res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    if (req.url !== '/favicon.ico') {
        var pathname = url.parse(req.url).pathname.replace(/\//, '')
        if (pathname == 'hello') {
            fs.readFile('./view/hello.html', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
                var data = url.parse(req.url).query
                var data1 = querystring.parse(data)
                var arr = []
                arr.push(data1)
                fs.writeFile('./log/hello.js', JSON.stringify(arr), 'utf8', err => {
                    if (err) throw err
                })
            })
        } else if (pathname == 'world') {
            fs.readFile('./view/home.html', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else if (pathname == 'login') {
            fs.readFile('./log/hello.js', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else res.write('404')

    }
    //res.end()
}).listen(3000)

index.html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
</head>

<body>
    <div id="div1"></div>
    <form action="./hello" method="GET">
        login: <input type="text" placeholder="请登录" name="login">
        <br> password: <input type="password" placeholder="请输入密码" name="password">
        <br> 登录: <input type="submit" value="登录">
    </form>
    <div id="myDiv">
        <h2>使用 AJAX 修改该文本内容</h2>
    </div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
<script>
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function(e) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = JSON.parse(xmlhttp.responseText)
                data.forEach((data, index) => {
                    if (data.login === '1520728083') {
                        console.log(data.login)
                        document.getElementById("div1").innerHTML = data.login
                    }
                })
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "http://localhost:3000/login", true);
        xmlhttp.send();
    }
</script>

</html>

提交表单数据保存在hello.js文件中

用ajax请求从后台服务器拉取数据

用dom操作渲染在div中

post方法请求：

demo.js改成：

const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')

http.createServer((req, res) => {
    //res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    if (req.url !== '/favicon.ico') {
        var pathname = url.parse(req.url).pathname.replace(/\//, '')
        if (pathname == 'hello') {
            fs.readFile('./view/hello.html', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()

                // var data = url.parse(req.url).query
                // var data1 = querystring.parse(data)
                // var arr = []
                // arr.push(data1)
                // fs.writeFile('./log/hello.js', JSON.stringify(arr), 'utf8', err => {
                //     if (err) throw err
                // })
                var post = ''
                req.on('data', chuck => {
                    post += chuck
                })
                req.on('end', () => {
                    var obj = querystring.parse(post)
                    var arr = []
                    console.log(obj)
                    arr.push(obj)
                    fs.writeFile('./log/hello.js', JSON.stringify(arr), 'utf8', err => {
                        if (err) throw err
                    })
                })
            })
        } else if (pathname == 'world') {
            fs.readFile('./view/home.html', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else if (pathname == 'login') {
            fs.readFile('./log/hello.js', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else res.write('404')

    }
    //res.end()
}).listen(3000, () => {
    console.log('服务启动成功')
})

由于post参数需要解析所以需要用querysring的方法

index.html则把ajax请求改成POST即可

还有一种方法直接返回该页面用req请求方法来实现

demo.js代码如下：

const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')

http.createServer((req, res) => {
    //res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
    if (req.url !== '/favicon.ico') {
        var pathname = url.parse(req.url).pathname.replace(/\//, '')
        if (pathname == 'hello') {           
            var post = ''
            req.on('data', chuck => {
                post += chuck
            })
            req.on('end', () => {
                    var obj = querystring.parse(post)
                        // var arr = []
                        // console.log(obj)
                        // arr.push(obj)
                        // fs.writeFile('./log/hello.js', JSON.stringify(arr), 'utf8', err => {
                        //     if (err) throw err
                        // })
                    var arr = ['login', 'password']
                    var reg;
                    fs.readFile('./view/hello.html', 'utf8', (err, data) => {
                        if (err) throw err
                        res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                        for (var i = 0; i < arr.length; i++) {
                            reg = new RegExp('{' + arr[i] + '}', 'gi')
                            data = data.replace(reg, obj[arr[i]])
                            console.log(obj[arr[i]])
                        }
                        res.write(data)
                        res.end()
                    })
                })              
        } else if (pathname == 'world') {
            fs.readFile('./view/home.html', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else if (pathname == 'login') {
            fs.readFile('./log/hello.js', 'utf8', (err, data) => {
                if (err) throw err;
                res.writeHead(200, { 'Content-type': 'text/html;charset=utf8' })
                res.write(data)
                res.end()
            })
        } else res.write('404')

    }
    //res.end()
}).listen(3000, () => {
    console.log('服务启动成功')
})

该方法也可以把数据渲染到浏览器中