nodejs实现前后端传值的方法如下:
1、使用GET方式实现前后端数据提交:
GET方式数据放在url里进行提交,容量有限,有缓存
//GET表单.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="http://localhost:8080/aaa" method="get"> 用户:<input type="text" name="user"><br> 密码:<input type="password" name="pwd"><br> <input type="submit" value="submit"> </form> </body> </html>
Node服务器获取用户名与密码
//get_server.js const http=require('http'); const url=require('url'); createServer((req,res)=>{ let query=url.parse(req.url, true); console.log('user:'+query.user+',password:'+query.pwd) }).listen(8080)
url.parse解析的是整个url
url.parse(req.url, true)打印出来的内容: Url { protocol: null, slashes: null, auth: null, host: null, port: null, hostname: null, hash: null, search: '?user=123&pwd=2345', query: { user: '123', pwd: '2345' }, pathname: '/aaa', path: '/aaa?user=123&pwd=2345', href: '/aaa?user=123&pwd=2345' }
2、使用POST方式实现数据提交:
POST方式数据放在http-body里,容量较大,无缓存
//post表单.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="http://localhost:8080/aaa" method="POST"> 用户:<input type="text" name="user"><br> 密码:<input type="password" name="pwd"><br> <input type="submit" value="submit"> </form> </body> </html>
//post_server.js const http=require('http') const querystring=require('querystring') let server=http.createServer((req,res)=>{ let str=''; req.on('data',data=>{ str+=data; }) req.on('end',()=>{ let post=querystring.parse(str); console.log(str,post) }) res.end() }) server.listen(8080)
例:
简单地登录注册提交与数据校验
//index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.3.1.js"></script> <script src="sub.js"></script> </head> <body> 用户名:<input type="text" id="user"><br> 密 码:<input type="password" id="pwd"><br> <button id="btn1">注册</button> <button id="btn2">登录</button> </body> </html>
//sub.js $(()=>{ $('#btn1').click(()=>{ $.ajax({ url:'/reg', type:GET, data:{user:$('#user').val(),pwd:$('#pwd').val()}, dataType:'json', success(data){ if(data.err){ alert('错误'+data.msg) }else{ alert('注册成功') } }, error(){ alert('出错了') } }) }); $('#btn2').click(()=>{ $.ajax({ url:'/login', type:GET, data:{user:$('#user').val(),pwd:$('#pwd').val()}, dataType:'json', success(data){ if(data.err){ alert('错误'+data.msg) }else{ alert('登录成功') } }, error(){ alert('出错了') } }) }) })
服务器端数据校验
//server.js const http=require('http'); const url=require('url'); const querystring=require('querystring'); const fs=require('fs') let users={ } let server=http.createServer((req,res)=>{ // GET let {pathname,query}=url.parse(req.url,true); // console.log(pathname) // POST let str=''; req.on('data',data=>{ str+=data; }) req.on('end',()=>{ let post=querystring.parse(str) let {user, pwd}=query; switch(pathname){ case '/reg': //注册 if(!user){ res.write('{"err":1, "msg":"user is required"') }else if(!pwd){ res.write('{"err":1, "msg":"pwd is required"}') }else if(!/^\w{8,32}$/.test(user)){ res.write('{"err":1, "msg":"invaild user"}') }else if(/^['|"]$/.test(pwd)){ res.write('{"err":1,"msg":"invaild password"}') }else if(users[user]){ res.write('{"err":1, "msg":"user is existed"}') }else{ users[user]=pwd; res.write('{"err":0, "msg":"reg success"}') } res.end() break; case '/login': //登录 if(!user){ res.write('{"err":1, "msg":"user is required"') }else if(!pwd){ res.write('{"err":1, "msg":"pwd is required"}') }else if(!/^\w{8,32}$/.test(user)){ res.write('{"err":1, "msg":"invaild user"}') }else if(/^['|"]$/.test(pwd)){ res.write('{"err":1,"msg":"invaild pwd"}') }else if(users[user]!=pwd){ res.write('{"err":1, "msg":"username or password is inaccuracy"}') }else if(!users[user]){ res.write('{"err":0, "msg":"user is not found"}') }else{ res.write('{"err":0, "msg":"login success"}') } res.end() break; default: //其他 fs.readFile(`www${pathname}`,(err,data)=>{ if(err){ res.writeHeader(404); res.write('not found') }else{ res.write(data) } res.end() }) } }) }) server.listen(8080)
以上就是如何用nodejs实现前后端传值?的详细内容,更多请关注0133技术站其它相关文章!