mysql交互(如何接收表单数据 Get方式，Post方式 (form表单))

最新推荐文章于 2024-05-13 13:13:10 发布

维克多噗噗

最新推荐文章于 2024-05-13 13:13:10 发布

阅读量4.2k

点赞数

分类专栏： mysql node

node 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

mysql

11 篇文章 0 订阅

订阅专栏

查询数据同时返回数据给前端

router.get('/',(req,res)=>{
    // res.render 用来响应模板引擎文件的
    //返回的data数据格式[{},{}] 
    sql('SELECT * FROM phone',(err,data)=>{
        res.render('index.ejs',{ data : data });
    })
});

浏览器提交(表单的两种方式)

get方式

// req.query浏览器(get方式)提交的数据  json
eg: {name:狗蛋,password:112}

index.ejs路由模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
</head>
<body>
<!-- 表单提交 -->
<!-- <form action="/reg" method="get">
    <input type="text" name="number">
    <input type="text" name="name">
    <input type="text" name="phone">
    <input type="submit" >
</form> -->
<input type="text" name="number" class="number">
<input type="text" name="name" class="name">
<input type="text" name="phone" class="phone">
<input type="submit" class="submit" >
<script src='/jquery.js'></script>
<script>
// ajax提交
    $(".submit").click(function(){
        $.ajax({
            url:"/reg",
            type:"get",
            data: {
                number:$(".number").val(),
                name:$(".name").val(),
                phone:$(".phone").val()
            },
            success:function(data){
                console.log(data);
            }
        });
    })
</script>
<img src="images/1.gif">
<% for(var i in data){ %>
    名字:<%= data[i]['name'] %>
    手机:<%= data[i]['phone'] %>
    <br>
<% } %>
</body>
</html>

响应并动态添加到数据库的操作

//  提交到/reg 这里
router.get('/reg',(req,res)=>{
    // req.query浏览器(get方式)提交的数据  json
    console.log(req.query.number);
    //   ?动态数据    2.value  []传入
    sql('INSERT INTO `phone` (`id`,`number`, `name`, `phone`) VALUES (0,?,?,?)',[req.query.number, req.query.name , req.query.phone ],(err,data)=>{
        //res.json()返回给浏览器  responseText
        if(err){
            res.json({
                data:"失败"
            });
        }else{
            res.json({
                data:"成功"
            });
        }

    })
});

这里写图片描述

post方式需要添加配置模块

package.json

{
    "name":"node02",
    "version":"0.0.1",
    "dependencies":{
        "express":"latest",
        "ejs":"latest",
        "mysql":"latest",
        "body-parser":"latest" //post
    }
}

app.js引入body-parser模块
这里写图片描述

post.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="/reg" method="post">
        <input type="text" name="name">
        <input type="text" name="pass">
        <input type="submit" >
    </form>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td>name</td>
            <td>pass</td>
        </tr>
    <% for(var i in data){ %>
        <tr>
            <td><%= data[i]['name'] %></td>
            <td><%= data[i]['pass'] %></td>
        </tr>
    <% } %>
    </table>
</body>
</html>

访问/520 才响应post.ejs , post响应并动态添加到数据库的操作

router.get('/520',(req,res)=>{
    // 访问/520 ,响应post.ejs模板文件
    sql('SELECT * FROM `user`',(err,data)=>{
        res.render('post.ejs',{ data : data});   //data数据格式[{},{}]
    })
});

// post方式
router.post('/reg',(req,res)=>{
    //req.body 用来接收post方式提交的数据
    console.log(req.body);
    sql('INSERT INTO `user` (`id`, `name`,`pass` ) VALUES(0,?,?)',[req.body.name,req.body.pass],(err,data)=>{})
});

这里写图片描述

维克多噗噗

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
mysql交互(如何接收表单数据 Get方式，Post方式 (form表单))

查询数据同时返回数据给前端router.get('/',(req,res)=>{ // res.render 用来响应模板引擎文件的 //返回的data数据格式[{},{}] sql('SELECT * FROM phone',(err,data)=>{ res.render('index.ejs',{ data : data }); })});
复制链接

扫一扫