express+ajax小练习

前端nodejs

本文总浏览量次

使用express-generator与jq的ajax实现的小例子，加深对ajax与表单提交的理解，适合初学者

安装express

1
npm install -g express-generator

新建工程

1
2
3
4
express
npm install
npm start
//访问localhost：3000即可看到页面

修改引擎和视图

在工程目录下的app.js修改为

1
2
//app.set('view engine', 'jade');
app.set('view engine', 'ejs');

由于我个人比较习惯用ejs，ejs比较贴近html，html甚至改下扩展名就可以，jade比较简洁但是就跟html相差比较多了

修改工程目录中route目录下的index.ejs写我们的页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./javascripts/jquery.min.js"></script>
</head>
<body>
    <div class="join-form">
                <form name="form" action="submit" method="get">
                    <div class="form">
                        <div class="form-item">
                            <input type="text" name="name" required="required" placeholder="姓名" autocomplete="off">
                        </div>
                        <div class="form-item">
                            <input type="text" name="institute" required="required" placeholder="学院" autocomplete="off">
                        </div>
                        <div class="form-item">
                            <input type="text" name="department" required="required" placeholder="意向部门" autocomplete="off">
                        </div>
                        <div class="form-item">
                            <input type="text" name="contact" required="required" placeholder="联系方式" autocomplete="off">
                        </div>
                        <textarea placeholder="请在此处介绍自己..." name="introduction">
                        </textarea>
                        <div class="button-panel">
                            <input type="submit" class="button" title="Sign In" value="报名">
                        </div>
                    </div>
                </form>
                <br>
                <button class="ajax">ajax</button>
                <div id="ajax"></div>
        </div>
</body>
<script src="./javascripts/ajax.js"></script>
</html>

只是小练习不做css的修饰

注意：上面引入的js文件是放在public文件夹下的，但是引入并不需要../public/XXX

表单提交部分服务端编写

在index.js加上

1
2
3
4
5
6
7
8
9
10
router.get("/submit",function(req,res){
     res.render('submit', {
        name: req.query.name,
        institute: req.query.institute,
        department: req.query.department,
        contact: req.query.contact,
        introduction: req.query.introduction
     });
});

当然渲染submit，我们也要在views下加上一个submit.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        姓名：<%=name %><br>
        学院：<%=institute %><br>
        意向部门：<%=department %><br>
        联系方式：<%=contact %><br>
        介绍：<%=introduction %><br>
    </div>
</body>
</html>

ajax部分完成

jquery的ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.ajax').on('click', function(event) {
    event.preventDefault();
    $.ajax({
        url: '/ajax',
        type: 'get',
        dataType: 'json',
        success:function(data){
            $('#ajax').html(data.tips);
        },
        error:function(data){
            alert('error');
        }
    });
});

服务器端的响应

在index.ejs添加

1
2
3
4
5
6
router.get('/ajax',function(req,res){
  var ajaxTest={
    tips:"ajax成功"
  };
  res.send(ajaxTest);
});

实现最终效果

未做任何操作

点击ajax

输入表单

提交后的页面渲染

代码分享

访问：https://github.com/BUPT-HJM/express-ajax

可自由转载、引用，但需署名作者且注明文章出处。