FastAPI JQuery $ajax 發布 - swagger 有效，postman 有效，但 $.Z2705A83A5A0659CEDA5Z4538

Question

我正在使用兩個 html select 表單元素 - 都具有多個屬性集。 我正在嘗試向 FastAPI 發布方法發送 $.ajax 發布請求。 此 api 方法適用於 POSTMAN 和使用 Fastapi DOCs 接口。 以下是我發送的fastapi片段和客戶端jquery ajax方法。 我從服務器收到 422 HTTP 響應，我懷疑這與我的格式化有關。 任何幫助將不勝感激。

Fastapi 的一面

class FilterModel(BaseModel):
    state_abbrev: list[str] = []
    card_type: list[str]= []
    
def get_db():
    try:
        db = SessionLocal()
        yield db
    finally:
        db.close()

@router.post('/filter')
async def filter_cards(filterModel: FilterModel, db: Session=Depends(get_db)):
    state_abbrev  = filterModel.state_abbrev
    card_type     = filterModel.card_type
    if state_abbrev:
        cards = db.query(models.Cards).filter(models.Cards.state_abbrev.in_(state_abbrev))
    if biz_type:
        cards = cards.filter(models.Cards.card_type.in_(card_type))
    cards = cards.all()
    return {"cards":cards}

在客戶端

<script>
const form = document.getElementById('map-filter-form');
let states;
let card_types;

$(document).ready(function(){
    form.addEventListener('submit', (e) => {
    e.preventDefault();
    states = JSON.stringify( $('#state_abbrev').val());
    card_types = JSON.stringify($('#card_type').val());
    data = {"state_abbrev": states, "card_type": card_types};
    $.ajax({
        url: "http://localhost:8000/mapview/filter",
        type: "post",
        data: data,
        contentType: "application/json",
        success: function(rslts) {console.log(rslts)}
    });
            
    });
});   
</script>

Answer 1

感謝您的回復。 Chris 的回復為我提供了通過一些修改來完成這項工作所需的東西。 也許不像其他人那么簡潔，但我認為很清楚發生了什么。 再次感謝響應者...

function submit_form(){
    const form = document.getElementById('map-filter-form');
    let state_abbrev = document.getElementById('state_abbrev');
    let card_type    = document.getElementById('card_type');

    let states = [...state_abbrev.selectedOptions]
                 .map(option => option.value);
    let card_types = [...card_type.selectedOptions]
                     .map(option => option.value);

    data = {"state_abbrev": states, card_type: card_types};
    body = JSON.stringify(data);
    fetch("/mapview/filter", {
           method: "POST",
           headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
           },
           body:body
        })
    .then(response=> response.text())
    .then(data => {
        console.log(data);
    })
    .catch(error =>{
        console.log(error);
    });
    
}