(一)js+html创建表单,连接

一、Node服务

https://segmentfault.com/a/1190000019768393?utm_source=tag-newest

二、表单创建

我们创建一个简单的html文件【InputForm.html】,用于应答完成后的页面显示,页面中包含一个列表框,一个数字框,一个“提交”按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入表单</title>

</head>
<body>
    <form action="http://172.21.12.62:3002/InputForm.html" method="get">
        请输入文本<input type="text" name="TextData"/><br>
        请输入数字<input type="number" name="NumberData"/><br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

三、开启服务

创建一个js文件【httpserver.js】,先导入几个我们在运行过程中用到的包

let http=require('http');
let url=require('url');
let fs=require('fs');

创建一个server函数进行服务器的应答,需要接收传入的url,通过传入的url进行输出测试。例如当url为“/image”,我们显示一张自己准备好的图像,如果表单获取错误则报错,获取成功则输出相关信息。

在监听中输入自己定下的端口号和自己的IP地址

let condb=require('./mongoTest');
let http=require('http');
let url=require('url');
let fs=require('fs');
let sever=http.createServer(function(req,res){
    if(req.url==='/favicon.ico'){res.end('')}
    else if(req.url==='/'){
        res.writeHead(200,{'Content-Type':'text/html'});
        fs.readFile('./InputForm.html',function(err,FileData){
            if(err){
                console.log("Can not find such file");
                throw err;
            }
            res.write(FileData);
            res.write('<br>'+'<br>');
            res.end('File send Success');
            //console.log('1')
        });
        //console.log('2');
    }
    else if(req.url==='/image'){
        res.writeHead(200,{'Content-Type':'image/jpg'});
        fs.readFile('./Zelda.jpg',function(err,Image){
            if(err){
                console.log("Can not find such image");
                throw err;
            }
            res.write(Image);
            res.write('<br>'+'<br>');
            res.end('Image send Success');
        });
    }

});
sever.listen(端口,'IP');

 表单的输出如下,我们需要获取表单中的文本内容和数字内容,进行类型转换后在新页面输出

    else{
        res.writeHead(200,{'Content-Type':'text/html'});
        console.log(req.url);
        let urlPathName=url.parse(req.url).path;   //装载字符串
        console.log('urlPath= '+urlPathName);
        let urlQuery=url.parse(req.url,true).query; //true:由字符串变成对象
        //输出text
        let T=urlQuery.TextData;
        console.log('Text= '+T);
        res.write('text= '+T+'<br>');
        //输出数字
        let N=urlQuery.NumberData;
        console.log('Number= '+N);
        res.write('number= '+N+'<br>');
        res.end('<br>See you next time~');
    }
 

四、测试输出

先运行httpserver.js文件,然后打开html,在表单中输入内容

提交表单,如果正常输出则运行成功

陆流程 1. 创建注册页面,使用HTML表单,包含用户名、密码、确认密码、邮箱等输入框,并在表单中添加一个提交按钮。 2. 使用JavaScript验证表单输入内容的合法性,例如用户名和密码是否符合要求、两次密码是否一致等。 3. 在后端使用某种编程语言(例如PHP、Python、Java等)编写处理表单提交的代码,将用户输入的信息存储到数据库中。 4. 在注册成功后,返回给用户一个提示信息,告知注册成功并跳转到登录页面。 具体实现步骤如下: 1. HTML表单代码 ```html <form action="register.php" method="post"> <label>用户名:</label> <input type="text" name="username" required> <br> <label>密码:</label> <input type="password" name="password" required> <br> <label>确认密码:</label> <input type="password" name="confirm_password" required> <br> <label>邮箱:</label> <input type="email" name="email" required> <br> <input type="submit" value="注册"> </form> ``` 2. JavaScript表单验证代码 ```javascript var form = document.querySelector('form'); var password = document.getElementsByName('password')[0]; var confirm_password = document.getElementsByName('confirm_password')[0]; var email = document.getElementsByName('email')[0]; form.addEventListener('submit', function(event) { if (password.value.length < 6) { alert('密码长度不能小于6位'); event.preventDefault(); return false; } if (password.value !== confirm_password.value) { alert('两次输入的密码不一致'); event.preventDefault(); return false; } if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email.value)) { alert('邮箱格式错误'); event.preventDefault(); return false; } }); ``` 3. 后端处理表单提交的代码(以PHP为例) ```php <?php // 连接数据库 $conn = mysqli_connect('localhost', 'root', 'password', 'database_name'); if (!$conn) { die('连接数据库失败:' . mysqli_connect_error()); } // 处理表单提交 if ($_SERVER['REQUEST_METHOD'] === 'POST') { $username = $_POST['username']; $password = $_POST['password']; $email = $_POST['email']; // 查询用户名是否已存在 $sql = "SELECT * FROM users WHERE username = '$username'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { echo '用户名已存在'; } else { // 插入用户数据到数据库 $sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')"; if (mysqli_query($conn, $sql)) { echo '注册成功'; // 跳转到登录页面 header('Location: login.php'); } else { echo '注册失败:' . mysqli_error($conn); } } } // 关闭数据库连接 mysqli_close($conn); ?> ``` 4. 注册成功后返回提示信息并跳转到登录页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值