I’m trying to understand these codes, but it’s not making sense to me. Can anyone help me? I’m a beginner

Question

The idea is that the Javascript code communicates with the Python code calling a function and providing arguments, but exactly how it works does not understand very well.

Javascript code:

set_wheels (args)
    {
        const dist = Cast.toString(args.DISTANCE);
        $.ajax({
          header: {
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS"
          },
          url: 'http://'+window.location.hostname+':8080'+'/set_wheels?lw='+dist,
          success: function( response ) {
              log.log(response);
              log.log(dist);
          }
        });
    }

Python code:

from bottle import Bottle,response,request

class Classe(Bottle):
    def set_wheels(self):
            response.headers['Access-Control-Allow-Origin'] = '*'
            response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, OPTIONS'
            response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token'
            response.headers["Set-Cookie"]= 'SameSite=None;Secure'
            rw=request.GET.get('rw', '').strip()
            lw=request.GET.get('lw', '').strip()
            self.rapi.setJointSpeed(right_rotation=float(rw),left_rotation=float(lw))
        #     print("set_wheels")
            return "set_wheels"

Answer 1

Good night,

I had similar difficulty when I started programming in Java Script.

I don’t program much in Python for this purpose that I’m using. More I can help you understand a little.

Ajax is responsible for making a communication via POST or GET with the backend, and pass data to it. So whenever Ajax runs it "calls" the page through the URL and exchange data note that there is the function Success, which is where the return is if the page is available and the communication has worked. It can still be used beforeSend and error. Beforesend is executed while executing the Ajax request. And if something goes wrong instead of running the Success will execute error. See below.

        const dist = Cast.toString(args.DISTANCE); 
        $.ajax({
          type: 'post',
          header: {
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS"
          },
          url: "http://url_requisicao",
          data: {"variavel":valor, "variavel2":valor2},
          beforeSend: function () {
            //faça algo aqui enquanto carrega.
        }, 
          success: function( response ) {
              log.log(response);
              log.log(dist);
          },
           error: function (jqXHR, textStatus, errorThrown) {
            alert("Erro. Falha na conexão!");
        }
          
        });

Note that I can pass specific data through the "date:" method. And also choose the POST or GET method.

In the documentation of website official contains more details.

In the Python page that you will point to through the variable "url" in Ajax, you can execute whatever you want. And receive the values sent via Ajax. Behold:

import cgi;
import cgitb
cgitb.enable()

if (form.has_key("variavel") and form.has_key("variavel2")):
    display_data(form["variavel"].value, form["variavel2"].value)
else:
    display_error()

It would be more or less that ai if you want to execute a specific function it would be interesting to receive the value of Ajax in a variable and create a condition to call this function.

Source: https://api.jquery.com/jquery.ajax/ ; https://gist.github.com/twmht/9935260 ; https://docs.python.org/3/library/cgi.html ;