Python HTML'de kullanicinin tikladigi yerin verisini nasıl alınır?

Hocam javascript ile koordinatı alıp fetch api GET veya POST request yaparak koordinatları gönderin flask tarafına.
Başarılar dilerim.
 
@Can Deger eger butina basildiginda o butondaki text almak istiyorsaniz veya baska islemler yapmak istiyorsaniz JS domu arastirun.

@Can Deger sizce flask mi Django mu?
Hocam ben Flask ustunden gidiyorum. Daha dogrusu projem o yonde. Suan 3 tane farkli yol haritasi cizdim kendime 3 cozumude deniyecegim.

Hocam javascript ile koordinatı alıp fetch api GET veya POST request yaparak koordinatları gönderin flask tarafına.
Başarılar dilerim.
Tesekkur ederim. Suan ben 3 secenek buldum. 1. HTML elementlerine `button` ozelligi verip GET, POST sistemi ile cagirmak. 2. JS kodu kullanip HTML'e koyum o basilan yeri bir sekilde app.py'ima cagirmak. 3. Sistem ise butun resimlerin yerlerine koordinat vermek. Bunu `Selenium`, `.location` ile cozebilirmiyim diye bakiyorum. Tavisyelerinizi bekliyorum.
 
Tesekkur ederim. Suan ben 3 secenek buldum. 1. HTML elementlerine `button` ozelligi verip GET, POST sistemi ile cagirmak. 2. JS kodu kullanip HTML'e koyum o basilan yeri bir sekilde app.py'ima cagirmak. 3. Sistem ise butun resimlerin yerlerine koordinat vermek. Bunu `Selenium`, `.location` ile cozebilirmiyim diye bakiyorum. Tavisyelerinizi bekliyorum.
Hocam ne yapmak istediğinizi anlamadım ben tam olarak. Dediğim gibi html içerisinde bodynin en altına bir script tagı açın.
JavaScript:
document.getElementById("resim-id").addEventListener("click", function (event){
    fetch('request-yapılacak-url', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({"X":event.clientX,"Y":event.clientY})
    }).then(response => response.json()).then(data => {
        // sunucudan dönen json response ile işlemler
    })
});
Yukarıdaki gibi kullanıcının resim elementi içinde tıkladığı yerin konumunu alarak sunucuya yollayabilirsiniz. Sunucu tarafında da yapmak istediğinizi yapıp flaskın jsonify fonksiyonuyla response döndürün. Daha sonra ikinci then methodu içerisinde sayfada istediğiniz değişiklikleri sunucudan gelen response'a yapabilirsiniz.

NOT: Flask post requestlerde csrf token isteyebilir request body içerisinde csrf token da döndürülmesi gerekebilir.
 
Hocam ne yapmak istediğinizi anlamadım ben tam olarak. Dediğim gibi html içerisinde bodynin en altına bir script tagı açın.
JavaScript:
document.getElementById("resim-id").addEventListener("click", function (){
    fetch('request-yapılacak-url', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({"X":event.clientX,"Y":event.clientY})
    }).then(response => response.json()).then(data => {
        // sunucudan dönen json response ile işlemler
    })
});
Yukarıdaki gibi kullanıcının resim elementi içinde tıkladığı yerin konumunu alarak sunucuya yollayabilirsiniz. Sunucu tarafında da yapmak istediğinizi yapıp flaskın jsonify fonksiyonuyla response döndürün. Daha sonra ikinci then methodu içerisinde sayfada istediğiniz değişiklikleri sunucudan gelen response'a yapabilirsiniz.

NOT: Flask post requestlerde csrf token isteyebilir request body içerisinde csrf token da döndürülmesi gerekebilir.
Tamamdir cok tesekkur ederim. Ben icersinde bir suru resim olan bir sayfa yaptim. Kullanici istedigine tiklayacak ben bunu sectim diyecek.
 
Tamamdir cok tesekkur ederim. Ben icersinde bir suru resim olan bir sayfa yaptim. Kullanici istedigine tiklayacak ben bunu sectim diyecek.
Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:
HTML:
<img src="..." data-index="1">
<img src="..." data-index="2">
<img src="..." data-index="3">
Sonra da sunucu tarafına direkt bu data değerini döndür. Kolayca hangi resme tıklandığını anlarsın.
 
Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:
HTML:
<img src="..." data-index="1">
<img src="..." data-index="2">
<img src="..." data-index="3">
Sonra da sunucu tarafına direkt bu data değerini döndür. Kolayca hangi resme tıklandığını anlarsın.
Yine bu JS kodu yazmam lazim degil mi? Data-Index'ini alacagim herhalde JSON formatina cevirecek ordanda onu alip isleyecegim.

Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:
HTML:
<img src="..." data-index="1">
<img src="..." data-index="2">
<img src="..." data-index="3">
Sonra da sunucu tarafına direkt bu data değerini döndür. Kolayca hangi resme tıklandığını anlarsın.
Hocam burayi biraz detayli anlatma sansiniz olur mu ?

Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:
HTML:
<img src="..." data-index="1">
<img src="..." data-index="2">
<img src="..." data-index="3">
Sonra da sunucu tarafına direkt bu data değerini döndür. Kolayca hangi resme tıklandığını anlarsın.
data-index vermeyi anladim. Ustteki ile beraber mi onu anlamadim. Nedense isin icine JS girince bir bugladim ben ama cozecegim.
 
Son düzenleme:
Yine bu JS kodu yazmam lazim degil mi? Data-Index'ini alacagim herhalde JSON formatina cevirecek ordanda onu alip isleyecegim.
Aynen, js ile data-index değerini döndürmen lazım sunucuya.Jquery kullanıyosan direkt şöyle yapabilirsin.
JavaScript:
$(".resim-class-ismi").on("click", function (event){
    $.ajax({
        url:"sunucu-url",
        type:"post",
        data: {
            "index":this.dataset.index,
        }
        success:function(json){},
        error: function(){}
    })
})
Python:
@app.route("/url-ismi",methods = ['POST'])
def resimAl()
    resim-index = request.json.get("index")
    # yapılacak işlemler ...
    return jsonify() # response döndür

Yukarıdaki gibi yapılabilir.
 
Aynen, js ile data-index değerini döndürmen lazım sunucuya.Jquery kullanıyosan direkt şöyle yapabilirsin.
JavaScript:
$(".resim-class-ismi").on("click", function (event){
    $.ajax({
        url:"sunucu-url",
        type:"post",
        data: {
            "index":this.dataset.index,
        }
        success:function(json){},
        error: function(){}
    })
})
Python:
@app.route("/url-ismi",methods = ['POST'])
def resimAl()
    resim-index = request.json.get("index")
    # yapılacak işlemler ...
    return jsonify() # response döndür

Yukarıdaki gibi yapılabilir.
Hocam suan bir sey deniyorum sizin sistemide deniyecegim. Sagolun varolun. Zaten sizin sistem daha iyi. Not aldigimdan bu yaptigim dogrulari yanlislari sonuna kadar goturup kayit ediyorum. Size bir sorum olacak: Bu JS HTML ustunden yazilan bir olay mi? Soyle, tamam JS dosyasi yaziyorsun sonra <script> ile cagriyorsun herhalde? Dogru anlamismiyim ?
 
Hocam suan bir sey deniyorum sizin sistemide deniyecegim. Sagolun varolun. Zaten sizin sistem daha iyi. Not aldigimdan bu yaptigim dogrulari yanlislari sonuna kadar goturup kayit ediyorum. Size bir sorum olacak: Bu JS HTML ustunden yazilan bir olay mi? Soyle, tamam JS dosyasi yaziyorsun sonra <script> ile cagriyorsun herhalde? Dogru anlamismiyim ?
Vanilla js öyle. html dom'u manüpüle etmekte kullanılıyor. Ancak nodejs veya deno ile backend vb. başka işlerde de kullanılabiliyor. Çok geniş kapsamlı bir dil.
 

Geri
Yukarı