我需要执行两个功能:在数据库中添加和删除用户(使用 Mongoose)。但是，在执行时我得到一个 200 OK 页面和一个空白的用户名。
ajax 调用有问题吗？
我正在尝试从表单中提取用户输入(用于添加)并进行 ajax 调用以刷新更新后的列表。 它的代码如下:
前端.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 readyuserview.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关于javascript - 添加/删除用户后使用 AJAX 刷新列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44151146/