添加/删除用户后使用AJAX刷新列表
我需要执行两个function：在数据库中添加和删除用户（使用Mongoose）。 但是，执行时，我得到一个200 OK页面和一个空白的用户名。
ajax调用有问题吗？
我正在尝试从表单中提取用户input（用于添加），并使ajax调用来刷新更新的列表。 代码如下：
frontend.js
console.log('Frontend Reached'); $(document).ready(function() { /*$(".delete_user").click(function(){ });*/ var url = '/users/delete_user'; var user_url = '/users/add_user'; function load_users(e) { $.ajax({ url: 'userview.ejs', dataType: 'text', type: 'post', ContentType: 'application/x-www-form-urlencoded', data: $('#list').serialize(), //$('#user_form').serialize() success: function(data, textStatus, jQxhr) { $('#list').load('userview.ejs #list'); //$('#user_form').submit( load_users ); }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); e.preventDefault(); } $('#user_form').on('submit', '#user_form', function(e) { e.preventDefault(); var user_name = $("#nameinput").val(); var user_age = $("#ageinput").val(); $.ajax({ url: 'userview.ejs', dataType: 'text', type: 'post', ContentType: 'application/x-www-form-urlencoded', data: { 'user_name': user_name, 'user_age': user_age }, success: function(data, textStatus, jQxhr) { $('#user_form').submit(load_users); load_users(); }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); e.preventDefault(); }); //onclick $(document).on('click', '.delete_user', function(e) { e.preventDefault(); var user_id = $(this).attr('data-id'); //console.log(user_id); var data = { user_id: user_id }; $.ajax({ url: 'userview.ejs', dataType: 'text', type: 'post', ContentType: 'application/x-www-form-urlencoded', data: { data }, success: function(data, textStatus, jQxhr) { // $('#list').html( data ); load_users(); }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); e.preventDefault(); }); //onclick delete }); //document ready userview.ejs
<meta charset="UTF8"> <link href="javascripts/frontend.js"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="/stylesheets/userlist.css"> <link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'> <link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'> <html> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></script> <script> </script> <title>Userlist</title> <script src="javascripts/frontend.js"></script> </head> <div class="container-fluid"> <div class="row"> <h1><strong>FORM</strong></h1> <hr id="hr2" style="border: 6px solid palevioletred"> <div id="black"> <form class="form-horizontal" method="post" action="/users/add_user" id="user_form"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Name : </label> <div class="col-md-4"> <input id="nameinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Age : </label> <div class="col-md-4"> <input id="ageinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number"> </div> </div> <!-- Button --> <!-- Button (Double) --> <div class="form-group"> <div class="col-md-8"> <button id="singlebutton" name="button1id" class="btn btn-success"><b>Add User</b></button> </div> </div> </form> <body> <h1><strong>USERS</strong></h1> <hr id="hr1" style="border: 6px solid #7ec4ec;"> <ul id="list" class="triangle"> <!-- Link trigger modal --> <!-- Modal --> <div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit :</h4> </div> <div class="modal-body"> <form> Name:<input type="text" name="modal_username" id="nameId" value="" /> Age: <input type="number" name="modal_age" id="ageId" value="" /> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <% for(var i=0; i<userlist.length; i++) {%> <li> <%= userlist[i].name %> : <%= userlist[i].age %> <a href="#" data-id="<%= userlist[i]._id %>" class="delete_user" title="Delete this User" id="delete">Delete</a> || <a data-toggle="modal" href="#openModal" data-target="#openModal" data-id="<%= userlist[i]._id %>" id="update" title="Update user info" class="update_user">Update</a></li> <% } %> </ul> </body> </fieldset> </div> </div> </div> </html>
这是userController.js
var User = require('../models/usermodel.js'); var userService = require('../services/userService'); var userController = { add: function(request, response) { var user_name = request.body.user_name; var user_age = request.body.user_age; var newUser = new User({ name: user_name, age: user_age }); console.log(newUser); userService.add(newUser, function(err, added) { if (err != null) { response.send(500); } else { response.send(200); } }); }, delete: function(request, response) { var userId = request.body.user_id; userService.delete(userId, function(err, deleted) { if (err != null) { response.send(500) } else { response.send(200); } }); } }; module.exports = userController;
console.log('Frontend Reached'); $(document).ready(function() { var url = '/users/delete_user'; var user_url = '/users/add_user'; function load_users() { $.ajax({ url: 'userview.ejs', dataType: 'text', type: 'post', ContentType: 'application/x-www-form-urlencoded', //not advisable or use html instead data: $('#list').serialize(), //it should be refer to form tag success: function(data, textStatus, jQxhr) { console.log(data); //#list should be the html wrapper to where you load the response data $('#list').html(data); //view the response in html }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); } $('#user_form').on('submit', '#user_form', function(e) { e.preventDefault(); var user_name = $("#nameinput").val(); var user_age = $("#ageinput").val(); $.ajax({ url: 'userview.ejs', dataType: 'text', type: 'post', ContentType: 'application/x-www-form-urlencoded', data: { 'user_name': user_name, 'user_age': user_age }, success: function(data, textStatus, jQxhr) { load_users(); }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); e.preventDefault(); }); //onclick $(document).on('click', '.delete_user', function(e) { e.preventDefault(); var user_id = $(this).attr('data-id'); $.ajax({ url: 'userview.ejs', dataType: 'json', type: 'post', ContentType: 'application/x-www-form-urlencoded', data: { user_id: user_id }, success: function(data, textStatus, jQxhr) { load_users(); }, error: function(jqXhr, textStatus, errorThrown) { console.log(errorThrown); } }); e.preventDefault(); }); //onclick delete }); //document ready