Question

我有一个单独的表格，也有一个单独的表格列表。我想要的是在我插入数据后，单独的表列表将自动更新。但在我保存数据后，我的表格列表不会更新。

这是我的代码：

createUser.php

<div class="container">
            <div class="col-md-4">
                <form role="form" id="usersForm">
                    <div class="row">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" id="input-lastname" placeholder="Last Name" class="input-sm form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" id="input-firstname" placeholder="First Name" class="input-sm form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <label>Age</label>
                            <input type="number" min="18" id="input-age" placeholder="Age" class="input-sm form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <p id="status"></p>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript" src="ASSETS/bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="ASSETS/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="http://127.0.0.1:8888/socket.io/socket.io.js"></script>
        <script src="client.js"></script>

server.js

var socket = require('socket.io');
var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);

var io = socket.listen(server);

io.sockets.on('connection', function(client) {

    console.log('New Client!');

    client.on('user', function(data) {
        console.log('data received');
        console.log(data);
        io.sockets.emit('users', {
            lastname: data.lastname,
            firstname: data.firstname,
            age: data.age
        });
    });

});

server.listen(8888);

client.js

var socket = io.connect('http://localhost:8888');

$('#usersForm').submit(function(e){

    e.preventDefault();

    var input_lastname = $('#input-lastname').val();
    var input_firstname = $('#input-firstname').val();
    var input_age = $('#input-age').val();

    socket.emit('user', {
        lastname: input_lastname,
        firstname: input_firstname,
        age: input_age,
    });

    $.ajax({
        url: "insertUser.php",
        type: 'POST',
        dataType: 'json',
        data: { lastname: input_lastname, firstname: input_firstname, age: input_age },
        beforeSend: function() {
            console.log('loading...');
        },
        success: function(data) {

            if(data.status == 1) {
                $('#status').text('Data Inserted!');
                $('#input-lastname').val('');
                $('#input-firstname').val('');
                $('#input-age').val('');
            } else {
                $('#status').text('Error Occured in query!');
            }

        },
        error: function() {
            alert('Error occured!');
        }
    });

    socket.on('users', function(data) {

        var newList     =   '<tr>';
            newList    +=   '   <td>' + data.lastname + '</td>';
            newList    +=   '   <td>' + data.firstname + '</td>';
            newList    +=   '   <td>' + data.age + '</td>';
            newList    +=   '</tr>';

        $('#user-list tbody').append(newList);

    });

});

但是当我将表单与列表放在一起时。它更新了我的清单。

你能帮我解决这个问题吗？

Answer 1

我认为socket.on(...)应该超出$('#usersForm').submit(...)，而socket.emit(...)应该是success的功能。

（它假定访问client.on(...)中的数据库）

如何在NodeJS和Socket.io中创建实时更新？

1 个答案: