how send Post request with ajax in ember.js?
12,233
Ember doesn't have any built in communication layer, you can use jquery for such calls.
App.LoginController = Ember.ObjectController.extend({
actions: {
userLogin: function(user) {
$.ajax({
type: "POST",
url: "http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password,
data: { name: "John", location: "Boston" }
})
this.transitionTo('cat');
},
cancelLogin: function() {
this.transitionTo('menu');
}
}
});
Author by
Maarten Heideman
Webspecialist from the Netherlands with love for Front-end, Craft CMS, WordPress and IONIC apps.
Updated on June 30, 2022Comments
-
Maarten Heideman almost 2 years
I want to send a POST (not GET) request to the server with ember.js. I don't know which function I need at "which function here", but I want to send it to the server for a login request.
App.LoginController = Ember.ObjectController.extend({ actions: { userLogin: function(user) { // which function here? ?? ("http://siteurl/api/authentication/login/&username=" + user.username + "&password=" + user.password + ""); this.transitionTo('cat'); }, cancelLogin: function() { this.transitionTo('menu'); } } }); App.UserFormComponent = Ember.Component.extend({ actions: { submit: function() { this.sendAction('submit', { username: this.get('username'), password: this.get('password') }); }, cancel: function() { this.sendAction('cancel'); } } });
down here template code
<script type="text/x-handlebars" data-template-name="login"> <header class="bar bar-nav"> <h1 class="title">inloggen</h1> {{#link-to 'menu' class="icon icon icon-bars pull-right"}}{{/link-to}} </header> <!-- SHOW LOADER --> <div class="content"> <div class="content-padded"> {{user-form submit="userLogin" cancel="cancelLogin" submitTitle="login"}} </div> </script> <script type="text/x-handlebars" data-template-name="components/user-form"> <form {{action "submit" on="submit"}}> <p><label>gebruikersnaam {{input type="text" value=username}}</label></p> <p><label>wachtwoord {{input type="password" value=password}}</label></p> <input type="submit" class="btn btn-primary btn-block" {{bindAttr value=submitTitle}}> <button class="btn btn-negative btn-block" {{action "cancel"}}>Cancel</button> </form> </script>