I'm using xampp-control to emulate a local server. I have a html file and i'm trying with ajax to post some data into a json file. I can get the data from the json, but when I'm trying to post doesn't work.
here is the html
<!doctype html>
<html class="no-js" lang="">
<head>
<script src="http://ift.tt/1LdO4RA"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1> Family Perez</h1>
<form>
<label>Name</label><input type="input" id="name" name="name"></input>
<label>Last Name</label><input type="input" id="lastName" name="lastName"></input>
<input type="submit" id="submitBtn" value="Add family Member" name="submit"></input>
</form>
<div></div>
</body>
</html>
and here is the js
$(function(){
$('#submitBtn').click(function(e){
e.preventDefault();
var firtsName = $('#name').val();
var lastName = $('#lastName').val();
$.ajax({
type: 'post',
url:'http://localhost/angel/Jquery_advanced/ajax/family.json',
dataType: 'json',
async: false,
data: {name: firtsName, last: lastName},
success: function(newMember){
alert(newMember.name + ' ' + newMember.last + ' ' + 'has benn added');
},
error: function (jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(textStatus);
}
})
});
$.ajax({
type: 'GET',
dataType: 'json',
url: 'http://localhost/angel/Jquery_advanced/ajax/family.json',
success: function(data) {
$.each(data, function(i, member){
$('div').append('<p>'+ member.name + ' ' + member.last +'</p>');
})
}
});
});
the file http://localhost/angel/Jquery_advanced/ajax/family.json has:
[{"name":"Juliseth","last":"Hernandez"},{"name":"Angel","last":"Perez"}]
Aucun commentaire:
Enregistrer un commentaire