Jquery.ajax 请求 'Get' to Web API 2 后端不起作用

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

本文关键字:API 不起作用 后端 Web Get ajax 请求 Jquery to      更新时间:2023-09-26

我有一个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;
    }
}
}

杰奎里

    ....
    $.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 非常陌生,所以也许这很容易解决?任何帮助不胜感激,谢谢!

所以,看起来每个人都在帮助我解决这个问题。我决定创建一个新的API项目,并从JQuery而不是Angular.js重新开始(我能够毫不费力地使用它来处理Angular项目,但除了更改它的问题之外什么都没有)。

相同的行为,但后来我注意到每次单击按钮登录时页面都会跳转......所以后来我发现我必须告诉它不要使用默认的浏览器行为,所以我改变了我的"点击"例程:

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

..突然间,它可以在两个浏览器上运行,没有任何问题!我可以解释为什么默认行为搞砸了吗?不。但希望这在未来能够帮助像我这样新鲜的人吗?