Requêtes AJAX / PYTHON

Version imprimable

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:

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:

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

14/01/2020, 07h27
Toufik83

Salut,

je ne vois aucune appelle ajax dans ton code, difficile de t'aider......
14/01/2020, 11h18
mac79

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

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

Code:

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:

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)

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:

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.

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:

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:

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

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

Code:

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:

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

24/01/2020, 14h48
mac79

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 .