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');
    }
  }
});
Share:
12,233
Maarten Heideman
Author by

Maarten Heideman

Webspecialist from the Netherlands with love for Front-end, Craft CMS, WordPress and IONIC apps.

Updated on June 30, 2022

Comments

  • Maarten Heideman
    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>