JQuery Ajax ile Web Api Kullanımı Kayıt Ekleme

Furkan Demirci Jquery Ajax Örnek

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22Scripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<div class="container">

<img id="loader" style="display: none; width: 100px;" src="loader.gif" />


<hr />



<div id="results" class="alert alert-success" style="display: none;">Kayıt İşlemi Tamamlandı<b>Sayfaya Gidiliyor...</b></div>


<div class="row">

<div class="col-md-12">

<div class="panel panel-primary">

<div class="panel-heading">

<h4>Furkan Demirci Form Örnek</h4>

</div>


<div class="panel-body">
<form id="kayitEkleForm">

<div class="form-group"><label>Ad :</label>
<input id="Ad" class="form-control" name="Ad" type="text" /></div>


<div class="form-group"><label>E-Mail :</label>
<input id="Email" class="form-control" name="Email" type="text" /></div>


<div class="form-group"><label>Durum</label>
<select id="Durum" class="form-control" name="Durum">
<option>Durum Seçiniz</option>
<option value="true">Aktif</option>
<option value="false">Pasif</option>
</select></div>


<div class="text-center"><input class="btn btn-success" type="submit" value="Gönder" /></div>

</form>
</div>

</div>

</div>

</div>

</div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0A%24(%22%23kayitEkleForm%22).submit(function%20(event)%20%7B%0A%0Aevent.preventDefault()%3B%0A%0A%24.ajax(%7B%0Aurl%3A%20%22http%3A%2F%2Flocalhost%3A3000%2Fapi%2FKayitEkle%2FEkle%22%2C%0Atype%3A%20%22POST%22%2C%0Adata%3A%20%7B%0AAd%3A%20%24(%22%23Ad%22).val()%2C%0AEposta%3A%20%24(%22%23Email%22).val()%2C%0ADurum%3A%20%24(%22%23Durum%22).val()%0A%7D%2C%0AbeforeSend%3A%20function%20()%20%7B%0A%24(%22%23loader%22).show()%3B%0A%7D%2C%0Acomplete%3A%20function%20()%20%7B%0A%24(%22%23loader%22).hide()%3B%0A%7D%2C%0Asuccess%3A%20function%20(data)%20%7B%0A%24(%22%23results%22).show()%3B%0A%0A%7D%2C%0Aerror%3A%20function%20()%20%7B%0Aalert(%22hata%20var%22)%3B%0A%7D%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />