30 Haziran 2016 Perşembe

DJANGO AJAX KULLANIMI:

ÖRNEK1:Form üzerinde butona tıkladığı zamana mesaj versin:


urls.py
----------------------------------------
url(r'^ajax-sayfa/', yonetim.views.ajax_sayfa),
url(r'^ajax-kod', yonetim.views.ajax_kod),





views.py

-----------------------------------------


from django.http import HttpResponse
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.shortcuts import render






def ajax_sayfa(request):
    return render_to_response('t0.html')

def ajax_kod(request):
    return HttpResponse("Ajax mesaj örneği");






tempalte/t0.html


--------------------------------


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('#btn').click(function(){
                $.ajax({
                    type:'get',
                    url:'/ajax-kod/',
                    success:function(veri){
                        alert(veri);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="gonder"/>
</body>
</html>







ÖRNEK2:Form üzerinde text'e girilen değeri parametre olarak göndersin ve bu değeri form üzerinde div elementinde göstersin:






urls.py



----------------------------------------


url(r'^ajax1-sayfa/', yonetim.views.ajax1_sayfa),
url(r'^ajax1-kod', yonetim.views.ajax1_kod),









views.py



-----------------------------------------


from django.http import HttpResponse
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.shortcuts import render






def ajax1_sayfa(request):
    return render_to_response('t1.html')

def ajax1_kod(request):
    data=request.GET['prm1']


    return HttpResponse(data, content_type = "application/text")






tempalte/t1.html


--------------------------------




<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#btn1').click(function () {
            var _prm1 = $("#txt1").val();
            $.ajax({
                cache: false,
                url: '/ajax1-mesaj?'+ "prm1=" + _prm1,
                type: 'GET',
                dataType: "html",
                success: function (result) {
                    //alert("sss");
                    $('#divgc').html(result);

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Error during process: \n' + xhr.responseText);
                }
            });
        });
    });
    </script>
</head>
<body>
mesaj gir:
<input type="text" id="txt1" name="txt1"/><br/>
<input type="button" id="btn1" value="gonder"/>
<div id="divgc" , class="sag"></div>

</body>
</html>











Eğer gelen veri div değil form üzerinde başka bir text'e yazdırılması istenirse bu durumda t1.html:




<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#btn1').click(function () {
            var _prm1 = $("#txt1").val();
            $.ajax({
                cache: false,
                url: '/ajax1-mesaj?'+ "prm1=" + _prm1,
                type: 'GET',
                dataType: "html",
                success: function (result) {
                    //alert("sss");
                    $('#txt2').val(result);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Error during process: \n' + xhr.responseText);
                }
            });
        });
    });
    </script>
</head>
<body>
mesaj gir:
<input type="text" id="txt1" name="txt1"/><br/>
<input type="button" id="btn1" value="gonder"/>
gelen değer:<input type="text" id="txt2" name="txt2" /><br/>

</body>
</html>




ÖRNEK3:Form üzerinde text'e girilen id'yi parametre olarak göndersin ve bu değeri id'yi tablodan sorgulayıp ad olarak text'e yazsın:


Urun tablsoundan id yi sorgulayıp ürünün adını getirir:







urls.py



----------------------------------------


url(r'^ajax2-sayfa/', yonetim.views.ajax2_sayfa),
url(r'^ajax2-mesaj', yonetim.views.ajax2_mesaj),











views.py



-----------------------------------------


from django.http import HttpResponse
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.shortcuts import render






def ajax2_sayfa(request):
    return render_to_response('t2.html')

def ajax2_mesaj(request):
    gelen_id=request.GET['prm1']
    data = Urun.objects.get(id=gelen_id)
    return HttpResponse(data.ad, content_type = "application/text")








tempalte/t2.html


--------------------------------


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#btn1').click(function () {
            var _prm1 = $("#txt1").val();
            $.ajax({
                cache: false,
                url: '/ajax2-mesaj?'+ "prm1=" + _prm1,
                type: 'GET',
                dataType: "html",
                success: function (result) {
                    $('#txt2').val(result);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Error during process: \n' + xhr.responseText);
                }
            });
        });
    });
    </script>
</head>
<body>
mesaj gir:
<input type="text" id="txt1" name="txt1"/><br/>
<input type="button" id="btn1" value="gonder"/>
gelen değer:<input type="text" id="txt2" name="txt2" /><br/>


</body>
</html>


































on







































Hiç yorum yok:















Yorum Gönder


















        

      









Kaydol:
Kayıt Yorumları (Atom)