我的代码张贴照片与ajax不工作

Question

我写的代码在函数中工作，但在按钮单击中不工作。帮助我。如果我像这样写，它可以工作:

function fotoSecti(inputId) {
var inp = document.getElementById(inputId);
var fil = inp.files;
var formDat = new FormData();
for (var i = 0; i != fil.length; i++) {
formDat.append("files", fil[i]);
}

$.ajax({
url: odemeSecenekleriFotoEkle,
data: formDat,
processData: false,
contentType: false,
type: "POST",
success: function (response) {...
}

但是如果我写在这里就不行了:

$("#butonOdemeSecenekleriKaydet").click(function () {
var inp = document.getElementById("odemeSecenekleriInputFoto");
var fil = inp.files;
var formDat = new FormData();
for (var i = 0; i != fil.length; i++) {
formDat.append("files", fil[i]);
}

$.ajax({
url: odemeSecenekleriFotoEkle,
data: formDat,
processData: false,
contentType: false,
type: "POST",
success: function (response) {...

控制器:

[HttpPost]
public async Task<IActionResult> odemeSecenekleriKayit(List<IFormFile> files)

当我点击按钮时，我想让数据转到控制器。代码是相同的代码。虽然上述功能可以工作，但由于某些原因，按钮。

html代码:

<form id="formOdemeSecenekleri" name="form" style="display:none;" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<input onchange="fotoSecti();" class="form-control" type="file" id="odemeSecenekleriInputFoto" style="width:250px;">
</div>
<div class="col-md-12">
<input type="text" class="form-control odemeSecenekleriInput" placeholder="12 Taksit" />
</div>
<div class="col-md-12 butonDivOdemeSecenekleri">
<button id="butonOdemeSecenekleriKaydet" class="btn btn-outline-secondary">Kaydet</button>
</div>
</div>
</form>

Answer 1

您使用的按钮是提交按钮，它提交表单而不是ajax。
在您的按钮事件处理程序中，您必须停止表单提交。您可以通过使用event.preventDefault

阻止按钮的默认动作来做到这一点

$("#butonOdemeSecenekleriKaydet").click(function (event){
event.preventDefault();

或者你可以使用一个普通的按钮来代替提交按钮

<button type="button" id="butonOdemeSecenekleriKaydet" class="btn btn-outline-secondary">Kaydet</button>