I made a simple app using jQuery Get and Post methods to retrieve data (users) from json file and add to it.
index.html has a table to display users via ajax and get request and that works fine. but there is a button to add new users to json file using ajax with post method that takes the new user details from inputs but this one doesn't send the data at all and displays defined at the end of the table. i console.logged the data that im posting and it looks fine but doesn't get sent. Note: i used browser-sync first and now im using localhost but same result.
my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!----------------------------------------------------------- Meta tags ----------------------------------------------------->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logs</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<tr> <th>ID</th> <th>First name</th> <th>Last name</th> </tr>
</thead>
<tbody class="user">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-success getUsers"> Get Users </button>
<form class= "form-inline">
<input id="id" class="form-group" placeholder="ID">
<input id="firstName" class="form-group" placeholder="First name">
<input id="lastName" class="form-group" placeholder="Last name">
</form>
<button class="btn btn-success addUsers"> Add a user</button>
</div>
</div>
<script>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$('.getUsers').click(function(){
$.ajax({
type:"GET",
url: '/logs/users.json',
dataType: 'json',
success: function(users){
$.each(users, function(i, user){
$('.user').append('<tr><td>'+ user.id +'</td> <td>'+ user.firstName +'</td> <td>' +user.lastName + '</td></tr>');
});
},
error: function(){
alert('error');
}
});
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$('.addUsers').click(function(){
var newUser = {
id: $('#id').val(),
firstName: $('#firstName').val(),
lastName: $('#lastName').val()
};
console.log(newUser);
$.ajax({
type:"POST",
url: '/logs/users.json',
dataType: 'json',
data: newUser,
success: function(person){
$('.user').append('<tr><td>'+ person.id +'</td> <td>'+ person.firstName +'</td> <td>' +person.lastName + '</td></tr>');
},
error: function(){
alert('error');
}
});
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>
</body>
</html>
and json file:
[
{
"id": 1,
"firstName": "A",
"lastName": "B"
}
]
Aucun commentaire:
Enregistrer un commentaire