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

来源：互联网发布：十一双十一淘宝编辑：程序博客网时间：2024/06/06 01:55

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

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

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

get方式

// req.query浏览器(get方式)提交的数据  jsoneg: {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 0

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

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

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

get方式

post方式 需要添加配置模块

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

post方式需要添加配置模块