Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

ASP.Net te Ajax,JQuery ve JSON Kullanarak İl-İlçe-Semt Uygulaması

turgay , 10. June 2009, 22:31

Merhaba arkadaşlar

Bu yazımda daha önce Ajax, JQuery ve WebMethod kullanarak yaptığımız il-ilçe-semt uygulamasını şimdi remote bir dosya ve JSON kullanarak yapacağız. Önceki makaleye buradan erişebilirsiniz.

DataTableToJSon metoduyla alakalı makaleye de buradan erişebilirsiniz.

Açıklamalar kod üzerindedir.

ilce_semt.aspx. ilçe ve semt bilgilerini getiren aspx dosyası.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using System.Data.SqlClient;

public partial class ilce_semt : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string tip = Request["tip"].ToString();
        string id = Request["id"].ToString();

        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTable = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            if (tip == "ilce")
            {
                sqlCommand = new SqlCommand("Select * from ilceler where IlID=@ID", sqlConnection);
            }
            else if (tip == "semt")
            {
                sqlCommand = new SqlCommand("Select * from semtler where IlceID=@ID", sqlConnection);
            }

            sqlCommand.Parameters.Add("ID", SqlDbType.NVarChar);
            sqlCommand.Parameters["ID"].Value = id;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTable);

            if (tip == "ilce")
                Response.Write(DataTableToJSon("0", dataTable, "IlceID,Ad"));
            else if (tip == "semt")
                Response.Write(DataTableToJSon("0", dataTable, "SemtID,Ad"));
        }
        catch
        {
            Response.Write("");
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    /// <summary>Verilen datatable'ı JSON string olarak döndürür.</summary>
    /// <param name="type">"0" ise kolon adlarıyla dönüş yapar."1" ise row-col şeklinde dönüş yapar.</param>
    /// <param name="dt">JSON'a dönüştürülecek DataTable.</param>
    /// <param name="allowCols">İstenilen kolonlar.Virgül ile ayrılarak yazılacak.</param>
    /// <returns>JSON String.</returns>
    public string DataTableToJSon(string type, DataTable dt, string allowCols)
    {
        //allowCols string ini indexof kullanabilmek için List e atıyoruz
        List<string> listCols = new List<string>();
        if (allowCols != null)
        {
            foreach (string s in allowCols.Split(','))
            {
                listCols.Add(s);
            }
        }

        //dönüş string i
        StringBuilder JsonString = new StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            if (type == "0")
            {
                JsonString.Append("{ ");
                JsonString.Append("\"Head\":[ ");
            }
            else
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TABLE\":[{ ");
                JsonString.Append("\"ROW\":[ ");
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (type != "0")
                    JsonString.Append("\"COL\":[ ");

                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //allowCols null sa veya bu colon allowCols ta var ise
                    if ((allowCols == null) || (listCols.IndexOf(dt.Columns[j].ColumnName.ToString()) > -1))
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"},");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"}");
                        }
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    if (type == "0")
                        JsonString.Append("} ");
                    else
                        JsonString.Append("]} ");
                }
                else
                {
                    if (type == "0")
                        JsonString.Append("}, ");
                    else
                        JsonString.Append("]}, ");
                }
            }
            if (type == "0")
                JsonString.Append("]}");
            else
                JsonString.Append("]}]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }
}

Default.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.Net te Ajax ve JQuery Kullanarak İl-İlçe-Semt Uygulaması</title>
    <meta name="coder" content="Turgay SAHTİYAN" />
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //sayfa çalıştığında yapılan işlemler
    $(document).ready(function() {
        //ilçe ve semt in yanında ki yükleniyor gif lerini sayfa çalıştığında hide yapıyoruz.
        $("#loaderGif1").hide();
        $("#loaderGif2").hide();

        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz.
        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        //il dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_il").change(function() {
            ilChange();
        })

        //ilçe dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    //il dropdown u change olduğunda çalışacak fonksiyon
    function ilChange() {
        //ilçenin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif1").show();
        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //il dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilID = $("#ddl_il").val();

        $.getJSON("ilce_semt.aspx", { tip: "ilce", id: ilID },
            function (JSON) {
                //ilçenin içini boşaltalım.
                $('#ddl_ilce').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_ilce").append("<option value=''>İlçe Seçiniz</option>");
                //json datamızı dönerek ilçe nin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_ilce").append("<option value='" + data.IlceID + "'>" + data.Ad + "</option>");
                });
                //ilçenin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif1").hide();
                //ilçenin disabled özelliğini kaldırıyoruz.
                $("#ddl_ilce").removeAttr("disabled");
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }        
        );
        
        return false;
    }

    //ilçe dropdown u change olduğunda çalışacak fonksiyon
    function ilceChange() {
        //semtin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif2").show();
        //semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //ilçe dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilceID = $("#ddl_ilce").val();

        $.getJSON("ilce_semt.aspx", { tip: "semt", id: ilceID },
            function(JSON) {
                //semtin içini boşaltalım.
                $('#ddl_semt').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_semt").append("<option value=''>Semt Seçiniz</option>");
                //json datamızı dönerek semtin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_semt").append("<option value='" + data.SemtID + "'>" + data.Ad + "</option>");
                });
                //semtin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif2").hide();
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }
        );

        return false;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>
        <br />
    </div>
    </form>
</body>
</html>

Default.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page 
{

    protected void Page_Load(object sender, EventArgs e)
    {
        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", sqlConnection);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            //il dropdown unu dolduruyoruz
            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz", "");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            sqlConnection.Close();
        }
    }
}

Dikkat etmemiz gereken bir nokta ilce_semt.aspx dosyasında sadece JSON verisi olmalı. Yoksa JSON fonksiyonu çalışmaz.

Örneği buradan indirebilirsiniz. Ajax_JSon_il_ilce_semt.zip (1,80 mb)

Kolay Gelsin

Turgay Sahtiyan

ecd9c9cd-b972-4741-b5d2-9255d54c0d52|3|3.7

Tags: c sharp, asp.net, ajax, jquery, getjson, il-ilce-semt, il, ilce, semt
Kategori: Development | Ajax | ASP.NET | JQuery | JSon

E-mail | Permalink | Comments (2) | Trackback

ASP.NET te DataTable ı JSON a Çevirmek (DataTable Convert to JSON)

turgay , 9. June 2009, 23:54

Merhaba arkadaşlar,

Ajax ve JSON ile İl-İlçe-Semt uygulama makalemi hazırlarken DataList i JSON a dönüştürecek bir fonksiyona ihtiyacım oldu. Web de arayınca aşağıda ki sayfaya eriştim.

http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx

Burdaki fonksiyonları kullanarak tek bir fonksiyon hazırladım ve bir de allowCols yani istenilen kolonlar parametresini ekleyip yeni bir fonksiyon yaptım.

Güzel bir fonksiyon oldu. Umarım işinize yarar.

    /// <summary>Verilen datatable'ı JSON string olarak döndürür.</summary>
    /// <param name="type">"0" ise kolon adlarıyla dönüş yapar."1" ise row-col şeklinde dönüş yapar.</param>
    /// <param name="dt">JSON'a dönüştürülecek DataTable.</param>
    /// <param name="allowCols">İstenilen kolonlar.Virgül ile ayrılarak yazılacak.</param>
    /// <returns>JSON String.</returns>
    public string DataTableToJSon(string type,DataTable dt,string allowCols)
    {
        //allowCols string ini indexof kullanabilmek için List e atıyoruz
        List<string> listCols = new List<string>();
        if (allowCols != null)
        {
            foreach (string s in allowCols.Split(','))
            {
                listCols.Add(s);
            }
        }

        //dönüş string i
        StringBuilder JsonString = new StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            if (type=="0")
            {
                JsonString.Append("{ ");
                JsonString.Append("\"Head\":[ ");
            }
            else
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TABLE\":[{ ");
                JsonString.Append("\"ROW\":[ ");
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (type!="0")
                    JsonString.Append("\"COL\":[ ");

                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //allowCols null sa veya bu colon allowCols ta var ise
                    if ((allowCols==null) || (listCols.IndexOf(dt.Columns[j].ColumnName.ToString())>-1))
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            if (type=="0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"},");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            if (type=="0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"}");
                        }
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    if (type=="0")
                        JsonString.Append("} ");
                    else
                        JsonString.Append("]} ");
                }
                else
                {
                    if (type=="0")
                        JsonString.Append("}, ");
                    else
                        JsonString.Append("]}, ");
                }
            }
            if (type=="0")
                JsonString.Append("]}");
            else
                JsonString.Append("]}]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }

Kullanımı

TextBox1.Text = DataTableToJSon("0", dataTableIlce, "IlceID,Ad");

Dönen değer

{ "Head":[ 
	{ "IlceID":"117","Ad":"Ardanuç"}, 
	{ "IlceID":"118","Ad":"Arhavi"}, 
	{ "IlceID":"119","Ad":"Borçka"}, 
	{ "IlceID":"120","Ad":"Hopa"}, 
	{ "IlceID":"121","Ad":"Merkez"}, 
	{ "IlceID":"122","Ad":"Murgul"}, 
	{ "IlceID":"123","Ad":"Şavşat"}, 
	{ "IlceID":"124","Ad":"Yusufeli"} 
]}

Kullanım 2

TextBox1.Text = DataTableToJSon("1", dataTableIlce, null);

Dönen değer

{ "TABLE":[
	{ "ROW":
		[ 
		"COL":[ {{"DATA":"117"},{"DATA":"10"},{"DATA":"Ardanuç"}]}, 
		"COL":[ { {"DATA":"118"},{"DATA":"10"},{"DATA":"Arhavi"}]}, 
		"COL":[ { {"DATA":"119"},{"DATA":"10"},{"DATA":"Borçka"}]}, 
		"COL":[ { {"DATA":"120"},{"DATA":"10"},{"DATA":"Hopa"}]}, 
		"COL":[ { {"DATA":"121"},{"DATA":"10"},{"DATA":"Merkez"}]}, 
		"COL":[ { {"DATA":"122"},{"DATA":"10"},{"DATA":"Murgul"}]}, 
		"COL":[ { {"DATA":"123"},{"DATA":"10"},{"DATA":"Şavşat"}]}, 
		"COL":[ { {"DATA":"124"},{"DATA":"10"},{"DATA":"Yusufeli"}]} 
	]}
]}

Kolay Gelsin

Turgay Sahtiyan

827a3882-4974-47ad-927b-7c492ecf17d2|5|5.0

Tags: asp.net, c sharp, datatable, convert, json
Kategori: ASP.NET | Development | JSon

E-mail | Permalink | Comments (0) | Trackback

JSON Nedir?

turgay , 9. June 2009, 17:45

JSON kelime anlamı olarak JavaScript Object Notation manasına gelmektedir.

Yapı olarak XML e çok benzeyen JSON tipinin ana amacı veri alış verişi yaparken daha küçük boyutlarda veri alıp göndermektir. Ayrıca kullanımı da çok kolaydır.

XML ve JSON karşılaştırması için bir örnek verelim. Bunun için Müşteri datalarını tuttuğumuzu varsayalım.

XML Örneği

<musteriler>
    <musteri>
        <kod>120.01.001</kod>
        <ad>Microsoft</ad>
        <unvan>Microsoft AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.002</kod>
        <ad>Google</ad>
        <unvan>Google AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.003</kod>
        <ad>Yahoo</ad>
        <unvan>Yahoo AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.004</kod>
        <ad>Apple</ad>
        <unvan>Apple AŞ.</unvan>
    </musteri>
</musteriler>

Şimdide bunu JSON ile ifade edelim.

{musteriler:[
    {
       "kod":"120.01.001",
       "ad"="Microsoft",
       "unvan"="Microsoft AŞ",
    }
    {
       "kod":"120.01.002",
       "ad"="Google",
       "unvan"="Google AŞ",
    }
    {
       "kod":"120.01.003",
       "ad"="Yahoo",
       "unvan"="Yahoo AŞ",
    }
    {
       "kod":"120.01.004",
       "ad"="Apple",
       "unvan"="Apple AŞ",
    }
]}

Gördüğünüz üzere kodumuz oldukça azaldı ve yazması-okumasıda kolaylaştı.

Böyle 3-5 elemanlı örneklerde per bir performans göremesenizde 1000-2000 elemanlı örneklerde performans oldukça farkedecektir.

JSON un JQuery de kullanımıda çok basittir. Bununla alaklı bir örnek verip yazımızı noktalayalım.

JQuery nin kendi sitesinde verdiği örneği verip açıklamasını yapacağım.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
               //dönen datadaki her bir eleman için...
               $.each(data.items, function(i,item){ 
                   //elamanın media değerini alarak bir jpg oluştur
                   $("<img/>").attr("src", item.media.m).appendTo("#images");
                   //sadece ilk 4 kaydı getir
                   if ( i == 3 ) return false;
          });
});

Bu örnek kod flickr sitesinde ki cat kategorisine gönderilmiş son 4 resmi JSON kullanarak getirmekte.

JSON a giriş anlatımını baz olan bu yazımız bu kadar. Daha fazla bilgi için JSON http://www.json.org sitesini inceleyebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

0d147f79-ceb8-4ad5-8b4a-d1b81af55264|2|5.0

Tags: json, jquery, xml, ajax
Kategori: Development | JSon | JQuery

E-mail | Permalink | Comments (0) | Trackback

JQuery de Ajax İşlemleri

turgay , 9. June 2009, 12:15

Merhaba Arkadaşlar,

Bu yazımda JQuery ile ajax işlemlerini anlatacağım.

Ajax bildiğiniz üzere artık bir web sayfasının olmazsa olmazları arasında. JQuery ile de ajax işlemlerini ek bir kütüphane kullanmadan çok rahat bir şekilde yapabilmekteyiz.

Anlatımı 3 başlık altında yapacağım. Bunlar

Ajax istekleri (Ajax Request)
Ajax Olayları (Ajax Events)
Ajax Yardımcıları (misc.)

Ajax İstekleri

jquery.ajax(options) – En temel ajax isteğidir. Bir örnekle gösterelim

 $.ajax({
   type: "POST", 
   url: "deneme.aspx", 
   data: "ad=Turgay&soyad=Sahtiyan",
   success: function(msg){
       alert( "Gelen bilgi" + msg );
   error:function(msg){
       alert("hata" + msg)
   }
 });

type = İsteğin şeklini belirler. POST veya GET değeri alabilir.
url = İstek yapılacak sayfanın url sidir.
data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz.
success = İstek başarılı olduğunda çalışacak fonksiyondur.
error = İstek başarısız olduğunda çalışacak fonksiyondur.

load(url, [data], [callback]) – Url diye belirtilen sayfadan bilgileri çekip belirttiğimiz elemana atar.

Mesela linkler.aspx dosyasında ki bilgiyi linkler div ine yazmak için.

$("#linkler").load("linkler.aspx");

url = İsteğin yapılacağı sayfanın url sidir.
data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
callback = İstek tamamlandığında çalışacak fonksiyondur. Kullanılması zorunlu değildir.

jQuery.get( url, [data], [callback], [type] ) – İstenilen sayfayı HTTP Get isteği ile yükler.

Mesela üstte load ile yaptığımız işlemi get ile yapalım. Linkler.aspx sayfamızda ki linktip i sinema olanları alıp linkler id li div e yazıyoruz.

$.get("linkler.aspx",       
           { linkTip: "sinema" },       
           function(data){$(“#linkler”).html(data)}      
           );

url = İsteğin yapılacağı sayfanın url sidir.
data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
callback = İstek tamamlandığında çalışacak fonksiyondur. Elemana atamayı burda yapıyoruz. Kullanılması zorunlu değildir.
type = Dönen data nın tipini belirtmemize yarar. "xml", "html", "script", "json", "jsonp" veya "text" değerini alabilir.

jQuery.getJSON( url, [data], [callback] ) – HTTP Get metodu ile JSON Datası yüklemeye yarar. Parametre kullanımı aynıdır. JSON işlemlerine özel örnekler ileriki yazılarda detaylı anlatılacaktır.

jQuery.getScript( url, [callback] ) – Bir javascript dosyasını yükleyip çalıştırmaya yarar. Kullanımı şu şekildedir.

$.getScript("test.js");

jQuery.post( url, [data], [callback], [type] ) - İstenilen sayfayı HTTP Post isteği ile yükler. Kullanımı Get ile aynıdır.

Ajax Olayları

ajaxComplete( callback ) – Herhangi bir ajax isteği tamamlandığında çalışır. Mesela sayfamızda ki mesaj id li div e bir ajax isteği sonuçlandığında bilgi yazalım.

 $("#mesaj").ajaxComplete(function(event,request, settings){
   $(this).append("<li>İstek Tamamlandı</li>");
 });

ajaxError( callback ) - Herhangi bir ajax isteği hata verdiğinde çalışır. Kullanımı complete ile aynıdır.

ajaxSend( callback ) - Herhangi bir ajax isteği gönderilmeden hemen önce çalışır. Kullanımı complete ile aynıdır.

ajaxStart( callback ) - Herhangi bir ajax isteği başladığında çalışır. Kullanımı complete ile aynıdır.

ajaxStop( callback ) - Herhangi bir ajax isteği sonlandığında çalışır. Kullanımı complete ile aynıdır.

ajaxSuccess( callback ) - Herhangi bir ajax isteği başarılı olduğında çalışır. Kullanımı complete ile aynıdır.

Ajax Yardımcıları

jQuery.ajaxSetup( options ) – Ajax ayarlarını yapmamıza yarar. Sayfamızda kullandığımız ajax isteklerinin tamamında aynı bazı özellikleri kullanıyorsak bunları ajaxSetup ile bir kere yazabiliriz. Mesela bütün ajax isteklerimizde type özelliğini POST, dataType özelliğinide json kullanıyoruz. Bu durumda bunları her ajax isteğimizde yazmaktansa ajaxSetup ile belirleyebiliriz. Kodlarımızda azalmış olur:)

Kullanımı

$.ajaxSetup({
  type: "POST",
  dataType: "json"
});

serialize( ) – input elemanlarını parametre olarak kullanabilmek için serialize etmeye yarar. Örneğin form1 id li form umuzun içinde ad,soyad ve yas id li txt boxlar olsun. Ve bunlara da turgay,sahtiyan,29 bilgileri girilmiş olsun. Bu durumda aşağıda ki kodu yazdığımızda

$("#form1").serialize();

sonuç olarak şu bilgiyi alabiliriz.

ad=Turgay&soyad=Sahtiyan&yas=29

Ne kadar kolay ve hızlı değil mi:)

serializeArray( ) – Serialize ile aynı işi yapar. Tek farkı json data döndürmesidir.

JQuery ile ajax işlemleri bu şekilde. İleriki yazılarımda bolca örnek yapacağım. O zaman daha iyi anlatabileceğime eminim:)

Daha fazla bilgiye JQuery sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

8b65eb30-c88c-42f0-8230-e1dfbbadeede|7|4.4

Tags: ajax, jquery, json
Kategori: Ajax | Development | JQuery | JSon

E-mail | Permalink | Comments (0) | Trackback

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10