Requêtes AJAX / PYTHON

**mac79** · 13/01/2020, 17h45

Bonjour,

je suis bloque sur la manière de faire mes requêtes Ajax.
Ce que je souhaiterais faire c'est d'envoyer la valeur de mon textarea a mon fichier python et qu'une fois que mon fichier python a traite la valeur de textArea il l'envoie

fichier api.py // fichier auquel j'aimerais envoyer la chaine de caractère de mon texteArea pour le remplacer par le input

Code Python :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import wikipedia
 
 
liste_ville = ["paris", "marseille", "lyon", "toulouse", "nice", "nantes", "montpellier", "strasbourg", "bordeaux", "lille", "rennes", "reims", "toulon",
				"grenoble", "dijon", "angers", "nimes", "villeurbanne", "limoges", "annecy", "perpignan", "metz", "argenteuil", "rouen", "mulhouse", 
				"montreuil", "caen", "nancy", "tourcoing", "roubaix", "nanterre", "avignon", "dunkerque", "poitiers"]
 
wiki = wikipedia.set_lang("fr")
 
a = input()
 
for i in range(len(a.split())):
	for j in range(len(liste_ville)):
		if a.split()[i] == liste_ville[j]:
			print(wikipedia.summary(a.split()[i], sentences=2))

fichier .js // fichier ou je recupere la valeur de mon textArea et je renvois une div sur ma page web mais au lieu de renvoyer la valeur que je recupere en input sur ma page web j'aimerais l'envoyer sur mon fichier python et qu'un fois traité par mon fichier python ça renvoit mon "print(wikipedia.summary(a.split()[i], sentences=2))" a la ligne 7 de mon fichier.js a la place de textArea

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function send_msg(){
	var textArea = $("#textArea").val()
    if (textArea == ''){
	alert("Veuillez entrer du texte")
	}
	else {
	$("#chatBot").append('<div class="message_container_send">'+textArea+'</div>')
	$("#textArea").val('')
	}
}
$("#valider").click(send_msg);
$("#textArea").keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
	    if(keycode == '13'){
	    	send_msg();
	}
});

J'ai bien lu les tutos mais j'ai vraiment du mal avec Ajax alors que ça a pas l'air si compliqué que ça mais bon ... donc merci d'avance pour ceux qui m'aident a progresser

**Toufik83** · 14/01/2020, 07h27

Salut,

je ne vois aucune appelle ajax dans ton code, difficile de t'aider......

**mac79** · 14/01/2020, 11h18

justement je ne vois pas du tout comment faire ...

Si c'était pour gérer ça en Ajax directement avec et dans mon fichier javascript je sais comment faire, mais pour envoyer la valeur a mon fichier python et renvoyer la valeur de mon fichier python a mon fichier js je vois pas du tout comment faire ...

**mac79** · 14/01/2020, 13h29

j'ai pris ce chemin dis moi ce que vous en pensez ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function send_msg(){
	var textArea = $("#textArea").val()
	var request = $.get("/sendRequest/" + $("#textArea").val());
    if (textArea == ''){
	alert("Veuillez entrer du texte")
	}
	else {
	$("#chatBot").append('<div class="message_container_send">'+request+'</div>')
	$("#textArea").val('')
	}
}
$("#valider").click(send_msg);
$("#textArea").keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
	    if(keycode == '13'){
	    	send_msg();
	}
});

Code Python :

Sélectionner tout - Visualiser dans une fenêtre à part

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
from flask import Flask, render_template, jsonify
import requests
import wikipedia
 
app = Flask(__name__)
search_google_maps = "https://maps.googleapis.com/maps/api/place/textsearch/json"
api_key = "****"
 
@app.route("/", methods=["GET"])
def retrieve():
	return render_template('grandPy.html')
 
@app.route("/sendRequest/")     
 
def wiki():
	city_list = ["paris", "marseille", "lyon", "toulouse", "nice", "nantes", "montpellier", "strasbourg", "bordeaux", "lille", "rennes", "reims", "toulon",
					"grenoble", "dijon", "angers", "nimes", "villeurbanne", "limoges", "annecy", "perpignan", "metz", "argenteuil", "rouen", "mulhouse", 
					"montreuil", "caen", "nancy", "tourcoing", "roubaix", "nanterre", "avignon", "dunkerque", "poitiers"]
 
	wiki = wikipedia.set_lang("fr")
 
	for i in range(len(city.split())):
		for j in range(len(city_list)):
			if city.split()[i] == city_list[j]:
				data_wiki = wikipedia.summary(city.split()[i], sentences=2)
				return jsonify({'result'	:	data_wiki})
 
if __name__ == "__main__": 
	app.run(debug=True)

**Toufik83** · 14/01/2020, 16h04

Salut,

Lorsque tu dis Python, tu parles d'un langage serveur, tout comme Php ou autre..., et le principe d'ajax c'est d'envoyer des données javascript vers un script serveur (python dans ton cas), puis ce dernier les récupère et renvoi une réponse (selon une logique bien précise... ).

Je ne suis pas un fan de python mais je pense que le principe est le même, donc si on prend par exemple ta fonction send_msg qui contient un $.get, tu dois utiliser le callback (fonction de rappelle) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function send_msg(){
	var textArea = $("#textArea").val();
         if (textArea== ''){
	     alert("Veuillez entrer du texte");
	}
	else {
            $.get("/sendRequest/",{ donneesJs : textArea  })
            .done(function(data){//callback de succès
                $("#chatBot").append('<div class="message_container_send">'+data+'</div>');
	         $("#textArea").val('');
            })
            .fail(function(erreur){//callback d'erreur
                 alert("Erreur get :"+erreur);
             });
	}
}

Et dans ton fichier serveur Python, tu dois récupérer la variable donneesJs, je ne sais pas comment ça se fait en python mais en php on met $text=$_GET["donneesJs"]; ou $text=$_POST["donneesJs"] tout dépend de la méthode utilisée soit get ou post.

Voir la documentation de $.get.

**mac79** · 24/01/2020, 12h50

merci pour ton aide, j'ai réussis a faire ce que je voulais faire mais je rencontre un difficulté tout autre.

J'ai ce message d'erreur Uncaught SyntaxError: Unexpected token '[' // ligne26 du deuxième fichier // alors que je ne vois pas de probleme de ce coté la ...

Code Python :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import wikipedia
import requests
import json
from flask import Flask, render_template, request, jsonify
 
 
app = Flask(__name__)
 
 
@app.route("/retrieve")
def retrieve():
	return render_template('/grandPy.html')
 
@app.route("/data", methods=['POST'])
def get_data_api():
	get_data_for_js = app_grand_py.get_data(request.form['text'])
	return get_data_for_js
 
 
class getData:
 
	def __init__(self):
		self.data = ""
		self.latitude = ""
		self.longitude = ""
 
 
	def get_data(self, city):
		city_list = ["paris", "marseille", "lyon", "toulouse", "nice", "nantes", "montpellier", "strasbourg", "bordeaux", "lille", "rennes", "reims", "toulon",
						"grenoble", "dijon", "angers", "nimes", "villeurbanne", "limoges", "annecy", "perpignan", "metz", "argenteuil", "rouen", "mulhouse", 
						"montreuil", "caen", "nancy", "tourcoing", "roubaix", "nanterre", "avignon", "dunkerque", "poitiers"]
		self.data = ""
		for i in range(len(city.split())):
			for j in range(len(city_list)):
				if city.split()[i] == city_list[j]:
					self.data = city.split()[i]
 
		if self.data == "":
			response = "Désolé je ne sais pas du tout !"
			return jsonify({"wiki_answer": response})
		else:
			wiki = wikipedia.set_lang("fr")
			data_wiki = wikipedia.summary(self.data, sentences=2)
 
			url = requests.get("https://maps.googleapis.com/maps/api/geocode/json?address="+self.data+"&key=MYKEY")
			url = json.loads(url.text)
 
			location = url['results'][0]['geometry']['location']
			lat = location['lat']
			lng = location['lng']
			return jsonify({"wiki_answer": data_wiki}, {"data_lat": lat}, {"data_lng": lng})
 
 
 
 
 
if __name__ == "__main__": 
	app_grand_py = getData()
	app.run(debug=True)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
$( document ).ready(function() {
	$("#valider").click(send_msg);
	$("#textArea").keypress(function(event){
	    var keycode = (event.keyCode ? event.keyCode : event.which);
		if(keycode == '13'){
		   	send_msg();
		}
	});
});
 
 
 
function send_msg(){
	var textArea = $("#textArea").val();
    if (textArea == ''){
		alert("Veuillez entrer du texte")
		}
	else {
		$("#chatBot").append('<div class="message_container_send">'+textArea+'</div>')
		$("#textArea").val('')
		$.post('/data', {text: textArea,}).done(function(get_data) {
			$("#chatBot").append('<div class="message_container">'+get_data["wiki_answer"]+'</div>')
			$("#chatBot").append('<div class="message_container" id="map'+initMap+'</div>')
			function initMap() {
			map = new google.maps.Map(document.getElementById('map'), {
			  center: get_data["data_lat"], get_data["data_lng"],
			  zoom: 8
				});
			}
		});
	}
}

**Toufik83** · 24/01/2020, 12h57

La ligne 26 du 2éme fichier ce qui correspond à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

map = new google.maps.Map(document.getElementById('map'), {...}

?
Puis pourquoi tu déclare la fonction initMap() DANS le callback done de $.post ?
Ton code doit ressembler à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$.post('/data', {text: textArea,}).done(function(get_data) {
			$("#chatBot").append('<div class="message_container">'+get_data["wiki_answer"]+'</div>');
			$("#chatBot").append('<div class="message_container" id="map'+initMap+'</div>');
 
			map = new google.maps.Map(document.getElementById('map'), {
			  center: get_data["data_lat"], get_data["data_lng"],
			  zoom: 8
			});
 
		});

La variable center normalement est un tableau qui contient 2 variables get_data["data_lat"] et get_data["data_lng"] donc il faut les mettre dans un tableau comme suite :
center: [get_data["data_lat"], get_data["data_lng"] ].

**mac79** · 24/01/2020, 14h48

tout d'abord merci encore pour ton aide

c'est vrai que la fonction intimap n'était pas nécessaire mais je bêtement repris la manière dont s'était fait dans la doc ...

Et l'erreur est a la ligne 27 (center: get_data["data_lat"], get_data["data_lng"]), j'avais pas vu le saut de ligne au début pardon .

Requêtes AJAX / PYTHON

AJAX

Discussions similaires

Partager

Partager