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

533388 dedi:

@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?

Genişletmek için tıkla...

delikarga dedi:

Hocam javascript ile koordinatı alıp fetch api GET veya POST request yaparak koordinatları gönderin flask tarafına.

MouseEvent: clientX property - Web APIs | MDN

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

developer.mozilla.org

Using the Fetch API - Web APIs | MDN

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

developer.mozilla.org

Başarılar dilerim.

Genişletmek için tıkla...

Can Deger dedi:

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.

Genişletmek için tıkla...

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
    })
});

delikarga dedi:

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:Panoya kopyala

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.

Genişletmek için tıkla...

Can Deger dedi:

Tamamdir cok tesekkur ederim. Ben icersinde bir suru resim olan bir sayfa yaptim. Kullanici istedigine tiklayacak ben bunu sectim diyecek.

Genişletmek için tıkla...

<img src="..." data-index="1">
<img src="..." data-index="2">
<img src="..." data-index="3">

delikarga dedi:

Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:

HTML:Panoya kopyala

<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.

Genişletmek için tıkla...

delikarga dedi:

Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:

HTML:Panoya kopyala

<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.

Genişletmek için tıkla...

delikarga dedi:

Hmm ozaman daha basit. O resim elementlerinin içine data özelliği koy. Örnek:

HTML:Panoya kopyala

<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.

Genişletmek için tıkla...

Can Deger dedi:

Yine bu JS kodu yazmam lazim degil mi? Data-Index'ini alacagim herhalde JSON formatina cevirecek ordanda onu alip isleyecegim.

Genişletmek için tıkla...

$(".resim-class-ismi").on("click", function (event){
    $.ajax({
        url:"sunucu-url",
        type:"post",
        data: {
            "index":this.dataset.index,
        }
        success:function(json){},
        error: function(){}
    })
})

@app.route("/url-ismi",methods = ['POST'])
def resimAl()
    resim-index = request.json.get("index")
    # yapılacak işlemler ...
    return jsonify() # response döndür

delikarga dedi:

Aynen, js ile data-index değerini döndürmen lazım sunucuya.Jquery kullanıyosan direkt şöyle yapabilirsin.

JavaScript:Panoya kopyala

$(".resim-class-ismi").on("click", function (event){
    $.ajax({
        url:"sunucu-url",
        type:"post",
        data: {
            "index":this.dataset.index,
        }
        success:function(json){},
        error: function(){}
    })
})

Python:Panoya kopyala

@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.

Genişletmek için tıkla...

Can Deger dedi:

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 ?

Genişletmek için tıkla...

delikarga dedi:

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.

Genişletmek için tıkla...