javascript - Jquery.ajax requesting a 'Get' to Web API 2 backend is not working -

i have web api 2 project, , trying write front-end jquery. having issues, , quite frankly, confusing behaviors, when trying user (login).

backend:

using system; using system.collections.generic; using system.data; using system.data.entity; using system.data.entity.infrastructure; using system.linq; using system.net; using system.net.http; using system.threading.tasks; using system.web.http; using system.web.http.description; using angularjswebapiempty.models; using system.web.script.serialization;  namespace angularjswebapiempty.controllers { public class artistscontroller : apicontroller {     private bandioappentities db = new bandioappentities();      public artistscontroller()     {         db.configuration.proxycreationenabled = false;     }      // get: api/artists     public iqueryable<artist> getartists()     {         return db.artists;     }      // get: api/artists/5     [responsetype(typeof(artist))]     public artist get(string username, string password)     {         artist artist = null;         artist = (db.artists.include("bandmates").where(x => x.username == username && x.password == password).first<artist>());         return artist;     }      // put: api/artists/5     [responsetype(typeof(void))]     public async task<ihttpactionresult> putartist(int id, artist artist)     {         if (!modelstate.isvalid)         {             return badrequest(modelstate);         }          if (id != artist.artistid)         {             return badrequest();         }          db.entry(artist).state = entitystate.modified;          try         {             await db.savechangesasync();         }         catch (dbupdateconcurrencyexception)         {             if (!artistexists(id))             {                 return notfound();             }             else             {                 throw;             }         }          return statuscode(httpstatuscode.nocontent);     }      // post: api/artists     [responsetype(typeof(artist))]     public async task<ihttpactionresult> postartist(artist artist)     {         if (!modelstate.isvalid)         {             return badrequest(modelstate);         }          db.artists.add(artist);         await db.savechangesasync();          return createdatroute("defaultapi", new { id = artist.artistid }, artist);     }      // delete: api/artists/5     [responsetype(typeof(artist))]     public async task<ihttpactionresult> deleteartist(int id)     {         artist artist = await db.artists.findasync(id);         if (artist == null)         {             return notfound();         }          db.artists.remove(artist);         await db.savechangesasync();          return ok(artist);     }      protected override void dispose(bool disposing)     {         if (disposing)         {             db.dispose();         }         base.dispose(disposing);     }      private bool artistexists(int id)     {         return db.artists.count(e => e.artistid == id) > 0;     } } } 

jquery

    ....     $.ajax({         type: 'get',         url: '/api/artists/5',         data: {"username": login.username, "password": login.password},         success: function (data) {             alert('success');         },         error: function (data) {             console.log(data);         },     }); 

keep in mind using angular.js hit same exact api without issues...

when run in chrome browser, '{readystate: 0, responsetext: "", status: 0, statustext: "error"}'. reading on subject keeps telling me cross-domain issue, not issue here.

i decided try using ie browser, , not getting error. however, instead of returning artist belongs credentials, returning artists. also, credentials not appear need valid, no matter send getting artists.

i extremely new jquery, maybe resolved? appreciated, thanks!

so, looks jumped ship on helping me figure out. decided create new api project , start on jquery rather angular.js, (i able work no sweat angular project, have nothing issues changing over).

same behavior, noticed page jumping every time clicked button login... figured out had tell not use default browser behavior, changed 'click' routine so:

$('#signin_submit').on('click', function (event) {     event.preventdefault();      var login = {         username: $('#signin_username').val(),         password: $('#signin_password').val()     }      console.log(login);      $.ajax({         type: 'get',         url: './api/artists',         data: login,         success: function (data) {             alert('success');             console.log(data);         },         error: function (data) {             console.log(data);         },     }); }); 

..and works on both browsers without issues! can explain why default behavior screwing up? nope. may able fresh me out in future?