前端与后台交互之ajax（post请求）例子：模拟用户注册功能

最新推荐文章于 2024-02-23 11:46:43 发布

未LIVE

最新推荐文章于 2024-02-23 11:46:43 发布

阅读量1.5k

点赞数 2

本文链接：https://blog.csdn.net/qq_43843173/article/details/102765990

版权

nodejs 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

node

2 篇文章 0 订阅

订阅专栏

作者原文

1、jQuery中ajax请求需要了解的几个知识点

使用$.ajax方法的时候，只接受一个参数，那就是一个对象。这个对象就是当前请求的所要的所有配置
了解参数中的key、value值

  $.ajax({
    url:' ',//必填，请求的地址
    type:' ',//选填，请求方式，如果不填，默认的是GET请求方式
    data:{ },//选填，这是发送请求的时候携带的参数
    dataType:' json ',//选填，希望返回的数据类型，默认是string类型
    async:' true ',//选填，默认是true
    success:function(){ },//选填，成功的回调函数
    error:function(){ },//选填，失败时的回调函数 
    cache:true,//选填，是否进行缓存，默认是true
    status:{ },//选填，根据对应的状态码进行函数执行
    timeout:1000,//超时时间
})

2、话不多说，下面进行代码实操：

下面是前台代码：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端与后台交互之ajax(post请求)</title>
</head>
<body>
    <form action="" method="">
        <p class="inp">
            用户名：<input type="text" placehoder="请输入内容" id="username">
        </p>
        <p class="inp">
            密码:<input type="text" placehoder="请输入内容" id="password">
        </p>
        <p class="inp">
            <input type="submit" id="submitBtn">
        </p>
    </form>
</body>
    
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js"></script>
    <script>
        $("#submitBtn").click(function(e){
            //阻止默认行为
            var e = e || window.event;
            e.preventDefault();
            //获取表单数据
            var username = $("#username").val().trim();
            var password = $("#password").val().trim();

            //请求的参数
            var data = {'username':username,'password':password};

            $.ajax({
                 //请求地址
                url:'http://localhost:3000/users',
                //请求参数
                data,
                // 请求方式
                type:'POST',
                //成功回调
                success: function(kk){
                    console.log(kk);
                }
            });
        })
    </script>
</html>

-下面是后台部分代码，这里是由nodejs写的后台,负责设置接口数据类型。

下面是app.js

  
const express = require('express');
const path = require('path');
const cors = require('cors');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

const app = express();
app.use(cors());
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

var port = 3000;
app.listen(port,()=>{
  console.log('this server is running at ' + port);
});

module.exports = app;

下面是users.js 部分代码，由于没有连接数据库，所有将用户密码，先用数组的形式来保存数据来模拟存入数据库。

var express = require('express');
var router = express.Router();
const url = require('url');
//引入query-string （解析post请求过来的数据）
const queryString = require('querystring');

var dataInfo;

router.post('/', function(req, res, next) {
  // console.log(location.search);
  var str = '';
  req.on('data', (data) => {
    // console.log(data);//这里的数据是缓冲区中的二进制编码格式
    // <Buffer 75 73 65 72 6e 61 6d 65 3d 61 6e 64 79 26 70 61 73 73 77 6f 72 64 3d 73 74 72 69 6e 67 69 66 79>
    str += data;
  });
  
  var arr = [];
  req.on('end', () => {
    //需要用query-string解析编码
    POST = queryString.parse(str);
    console.log(POST.password);//解析完毕后即可获取到表单通过post请求过来的参数数据
    var _username = POST.username;
    var _password = POST.password;

    //接下来就是把用户注册的数据通过加密后存入到数据库中去。在这里不进行相应的操作，通过用数组来模拟
    if(_username.length <= 0 || _username.length >= 10) {
      dataInfo = {
        error_code:4003,
        reason:'用户名长度不能为空或者不能大于10',
        data:{
          token:''
        }
      }
    }

    if(_password.length <= 0 || _password.length >= 10) {
      dataInfo = {
        error_code:4003,
        reason:'密码长度不能为空或者不能大于10',
        data:{
          token:''
        }
      }
    }
// 一般来说，在这里需要对用户密码进行加密之后才存入数据库的，可以用双重md5来进行密码加密处理，也可以使用sha1来进行加密等。
//存入数组（即保存到数据库）
    arr.push(POST);
//接口api所返回的数据类型
    dataInfo = {
      error_code:0,
      reason:'注册成功',
      data:{
        token:''
      }
    }

  });
//响应数据
  res.json(dataInfo);
});

module.exports = router;