如何使用expressjs在表单提交后显示数据

时间:2014-12-12 07:32:19

标签: node.js mongodb express

**app.js** Code
app.get('/', function (req, res) {
        res.render('index', {
            data: docsData,
            title: "EJS example",
            header: "Some users"
        });
});
app.post('/', function (req, res) {
    var jname= req.body.firstname;
    var lname= req.body.lastname;
    var jemail= req.body.email;

    var collection = dbConnect.collection('users');
    var document={name:jname, lastname:lname, email:jemail};
    collection.insert(document, {w: 1}, function(err, records){
        console.log("Record added as "+records[0]._id);
    });

    dbConnect.collection("users").find({"name":jname}).toArray(function(err, docsData) {
        console.log('checking error',err, docsData);
        res.render('index', {
            data: docsData,
            title: "AJT Family",
            header: "Some users"
        });
    });
});



**html code**

<div align="center" ng-controller="FormCtrl">
    <form name="form" ng-submit="submitForm()" novalidate>
        <table>
            <tr><td>Name:</td>
                <td>
                    <input id="firstname" type="text" ng-model="regform.firstname" name="firstname" required="" />
                </td>
                <td>
                    <div ng-show="form.$submitted || form.firstname.$touched">
                        <div ng-show="form.firstname.$error.required">Enter your name.</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td>
                    <input id="lastname" name="lastname" type="text" ng-model="regform.lastname" required>
                </td>
                <td>
                    <div ng-show="form.$submitted || form.lastname.$touched">
                        <div ng-show="form.lastname.$error.required">Enter your Last name.</div>
                    </div>
                </td>
            </tr>

            <tr>
                <td>E-mail:</td>
                <td><input id="email" type="email" ng-model="regform.email" name="uEmail" required="" /></td>
                <td>
                    <div ng-show="form.$submitted || form.uEmail.$touched">
                        <span ng-show="form.uEmail.$error.required">Enter your email.</span>
                        <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
                    </div>
                </td>
            </tr>
</table>
       <input type="button" ng-click="reset(form)" value="Reset" />
        <input type="submit" ng-disabled="!form.$valid"  value="Save" />
        <p id="hu"></p>
    </form>
</div>
<%if(data) {%>
    <h1>Users</h1>
    <% data.forEach(function(user){ %>
    <br>
    <table>
        <tr><td>Name: </td><td><%= user.name %> <%= user.lastname %></td></tr>
        <tr><td>Email: </td><td><%= user.email %></td></tr>
    </table>
    <% }) %>
<% } %>
</body>
</html>


**javascript**
var result;
        var app = angular.module('formExample', []);
        app.controller('FormCtrl', function ($scope, $http) {
            $scope.data = {};
            $scope.submitForm = function() {
                formData = $scope.regform;
                console.log("posting data....");
                var request = $http({ url: '/',data: $scope.regform, method: 'post' });

                console.log(formData);
            };
        });

这里我可以使用expressjs在mongodb上保存数据。我需要在表单提交后显示数据。表单提交后没有显示任何内容。如何使用嵌入式Javascript在html中显示保存的内容。

1 个答案:

答案 0 :(得分:2)

您要做的是将res.render()电话改为执行以下操作:

res.render('index', {
  data: docsData,
  title: 'AJT Family',
  header: 'Some Users',
  body: req.body,  // This is your form data as a JSON object.
});

然后,在您的index模板中,您可以访问自己想要的表单数据,例如,如果您正在使用Jade,则可能需要说:

h1 Data!
p #{body}