Jquery.ajax請求'獲取'到Web API 2後端不起作用

Question

我有一個Web API 2項目，並且我試圖用JQuery編寫我的前端。在嘗試獲取用戶（登錄）時，我遇到了問題，坦率地說，有些混淆的行爲。

後端：

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); 
     }, 
    }); 

記住我本來用Angular.js打，沒有任何問題，這完全相同的API ...

當我運行這在Chrome瀏覽器中，我總是得到'{readyState：0，responseText：「，status：0，statusText：」error「}'。我正在閱讀的所有內容都告訴我這是一個跨域問題，但這不是問題。

然後我決定嘗試使用IE瀏覽器，突然間我沒有收到這個錯誤。但是，不是歸還屬於憑證的藝術家，而是歸還所有藝術家。此外，證書似乎不需要有效，無論我發送什麼，我都會收到所有藝術家。

我對JQuery來說非常新，所以也許這是很容易解決的問題？任何幫助表示讚賞，謝謝！

Answer 1

因此，看起來每個人都在幫我解決問題。我決定創建一個新的API項目，並開始使用JQuery而不是Angular.js，（我能夠使這個工作不會對Angular項目產生任何影響，但除了改變它的問題之外沒有任何問題）。

相同的行爲，但後來我注意到每次點擊按鈕登錄時頁面都會跳轉...所以後來我發現我不得不告訴它不使用默認的瀏覽器行爲，所以我更改了'click'例程要做到這一點：

$('#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); 
     }, 
    }); 
}); 

..突然它在兩個瀏覽器上都能正常工作！我可以解釋爲什麼默認行爲會導致這種情況發生？不。但希望這可能能夠幫助像我一樣新鮮的未來人？