如何在 ember v3.2.5 中使用 jQuery AJAX？

Question

I tried writing code that gives the alert message inside the function but the success or error block seems doesn't work.

How can I call the function properly? I'm using the latest Ember version (3.2.5). Here is my AJAX code in the app/controller

import Controller from '@ember/controller';
import $ from 'jquery';
export default Controller.extend({
  actions: {
    validateUser: function() {
      let res = this;
      var userName = this.get('username');
      var userPassword = this.get('password');

      $.ajax({
        type: "POST",
        url: "InsertServlet",
        data: {
          userId: userName,
          password: userPassword
        },
        success: function(data) {
          if (data == 1) {
            alert('valid user');
          } else {
            alert("Invalid User");
          }
        },
        error: function(xhr, status, error) {
          alert(xhr.responseText);
        }
      });
    },
  }
});

Answer 1

You would need to invoke the validateUser action in the template for this controller. If the controller is app/controllers/login.js then the template would be app/templates/login.hbs . Add <button {{on "click" (action "validateUser)}}>Login</button> there are when you click that button the action would fire.

However, if you're working with the current 3.25 version of ember you may want to rewrite this using the more idiomatic octane and JS approach. Which would look like:

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class LoginController extends Controller {
  @action
  async validateUser(){
    const response = await fetch(url, {
      method: 'POST',
      body: {userId: this.username, password: this.password },
    });
    console.log(response);
  }
}

And then the button would look like:

<button {{on "click" this.validateUser}}>Login</button>