11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous
Actuellement, pour faire une requête AJAX en passant une donnée en JSON, j'utilise

var formData = new FormData();
formData.append('data', JSON.stringify(data));
....
xhr.send(formData);

Le programme PHP récupère cette donnée par:

$inputJSON = $_REQUEST['data'];
$data = json_decode($inputJSON);

Question: comment faut il soumettre les données pour les récupérer côté serveur par

$inputJSON = file_get_contents('php://input');

C'est plus pour mon éducation que pour l'utilité même de la chose...
Modérateur
Bonjour, php://input peut être utilisé si les données ne sont pas celles d'un formulaire (qui sont pré-traitées par php). FormData ajoute l'en-tête multipart/form-data à la requête et simule donc parfaitement l'envoi d'un formulaire. Pour utiliser php://input il suffit d'envoyer les données dans le body de manière crue:


xhr.send(JSON.stringify(data));



$inputJSON = file_get_contents('php://input');
Meilleure solution
Bonjour,

Je permet de relancer le sujet même si il est résolu pour certains, mais pas pour moi Smiley rolleyes .
Je recherche une solution a mon problème qui est le suivant:

Je doit envoyer un fichier pdf (binaire)(pour info html2canvas fait une image d'une div et jsPDF met l'image dans un fichier pdf) et des données qui ne sont pas en formulaire vers un fichier de traitement en php pour ensuite les envoyer dans la base de donnée mysql:

J'essaye de faire cet envoie avec ajax jquery via un seul bouton, mais je ne parviens pas a récupérer les données envoyées parcontre je recupere bien le fichier pdf via la commande:
move_uploaded_file($_FILES....

Voici le code js:

function GenPDF(){
				window.scrollTo(0, 0); //scroll page entiere du haut en bas 
				html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
					var doc = new jsPDF();
					// doc.setFontSize(40); //taille titre
							// doc.text(40, 25, "test") // titre
							doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)
							var blob = doc.output('blob');
							var nomstage = $('#nomstage') . val();
							var numstage = $('#numstage') . val();							
							var FirearmId = $('#FirearmId') . val();						 
							var TrgtTypeId = $('#TrgtTypeId') . val(); 
							var ScoringId = $('#ScoringId') . val(); 
							var StartOn = $('#StartOn') . val(); 
							var StartPos = $('#StartPos') . val(); 
							var Descriptn = $('#Descriptn') . val();
							var CourseId = $('#CourseId') . val(); 
							var matchsid = $('#matchsid') . val();
							var formData = new FormData();
							formData.append('pdf', blob);

							var objArr = [];
							objArr.push({								
								formData, 
								"nomstage": nomstage, 
								"numstage": numstage, 
								"FirearmId": FirearmId,
								"TrgtTypeId": TrgtTypeId,
								"ScoringId": ScoringId,
								"StartOn": StartOn,
								"StartPos": StartPos,
								"Descriptn": Descriptn,
								"CourseId": CourseId,
								"matchsid": matchsid								
							});
				//JSON obj
				formData.append('objArr', JSON.stringify( objArr ));


				$.ajax({
					url: '/save-capture.php',
					type:"POST",
					processData:false,
					contentType: false,
					data: formData,
					// complete: function(data){alert("success");}
					success: function(response){console.log(response)},
					error: function(err){console.log(err)}
				});
			});
			}


Et voici les tentative coté php:

<?php

    $var = json_decode(file_get_contents("php://input"),true);
    echo "Data recieved by PHP file.\n";
    if ($var["nomstage"]=="John"){
        echo "ok";
    }
    else{
        echo "nok";
    }
  
    echo "\nSent";
die();


j'obtiens nok comme repose Smiley decu

mais je voit bien mes données dans le navigateur lorsque je fait un print_r($_POST) ou ($_REQUEST)

echo '<pre>';
    print_r($_REQUEST);
  echo '</pre>';
  die();
ou
echo '<pre>';
    print_r($_POST);
  echo '</pre>';
  die();


Meme Résultat du print_r de post ou REQUEST

<pre>Array
(
[objArr] => [{"formData":{},"nomstage":"John","numstage":"1","FirearmId":"1","TrgtTypeId":"2","ScoringId":"1","StartOn":"00","StartPos":"Exemple: Standing erect, facing downrange with hanging naturally by the sides.","Descriptn":"Exemple: Engage as they become visible.","CourseId":"1","matchsid":"24"}]
)
</pre>

Merci d'avance pour votre aide
Modifié par Nesyou75 (21 Mar 2020 - 11:21)
Je viens de regarder et j'avoue que je ne comprends pas tout je suis débutant.
J'ai testé ton code en essayant de l'adapter mais j'ai un message d'erreur (TypeError: Cannot read property 'querySelector' of null)

Pour info, je n'st pas de formulaire dans mon code html les données viennent de (select option value) et de (td) via un autre script js.

Voici le code

function uploadFile(formID) {
	window.scrollTo(0, 0); //scroll page entiere du haut en bas 
				html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
					var doc = new jsPDF();
					// doc.setFontSize(40); //taille titre
							// doc.text(40, 25, "TSV STAGE MAKER") // titre
							doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)
							var blob = doc.output('blob');
							var form = document.getElementById(formID);							
							var nomstage = form.querySelector('[name="nomstage"]');
							var numstage = form.querySelector('[name="numstage"]');
							var FirearmId = form.querySelector('[name="FirearmId"]');
							var TrgtTypeId = form.querySelector('[name="TrgtTypeId"]');
							var ScoringId = form.querySelector('[name="ScoringId"]');
							var StartOn = form.querySelector('[name="StartOn"]');
							var StartPos = form.querySelector('[name="StartPos"]');
							var Descriptn = form.querySelector('[name="Descriptn"]');
							var CourseId = form.querySelector('[name="CourseId"]');
							var matchsid = form.querySelector('[name="matchsid"]');							
							var formData = new FormData();
							formData.append('pdf', blob);
							formData.append('file', fileObject);
							formData.append('nomstage', nomstage.value);
							formData.append('numstage', numstage.value);
							formData.append('FirearmId', FirearmId.value);
							formData.append('TrgtTypeId', TrgtTypeId.value);
							formData.append('ScoringId', ScoringId.value);
							formData.append('StartOn', StartOn.value);
							formData.append('StartPos', StartPos.value);
							formData.append('Descriptn', Descriptn.value);
							formData.append('CourseId', CourseId.value);
							formData.append('matchsid', matchsid.value);							
							console.log(formData);
							var xhr = new XMLHttpRequest();
							xhr.onreadystatechange = function() {
								if(this.readyState == 4 && this.status == 200) {
									alert(this.responseText);
									return;
								}
							}
							xhr.open('post', 'save-capture.php');
							xhr.send(formData);
						});
			}

Modifié par Nesyou75 (21 Mar 2020 - 15:32)
Je suppose que tu veux dire qu'il n'y a pa de balise <form>. Mais si tu as des <input> <select> ou <textarea> quelque part peu importe dans quoi elles sont, il faut tous simplement les retrouver.
Il y a de nombreuses façons de les retrouver, cela dépend de ton code.
Dans l'exemple que j'ai donné, je retrouve les éléments par la fonction querySelector, qui permet de retrouver le premier élément ayant les caractéristiques données.
Si je prends le code ci-dessus

var form = document.getElementById(formID);							
var nomstage = form.querySelector('[name="nomstage"]');

La première ligner recherche un élément <form> dont l'id est la valeur que tu donnes dans l'appel de la fonction.Comme tu me dis qu'il n'y a pas de <form> dans ta page, il ne va rien trouver.
La seconde ligne recherche à l'intérieur de la balise <form> le premier élément qui a comme "name" "nomStage", très vraisemblablement tu dois avoir quelque par un <input type="text" name="nomStage">. Si tu n'as pas de <form> il ne va évidemment pas le trouver.
S'il est n'importe où dans le document, tu peux écrire document.querySelector('[name="nomstage"]'). S'il n'y en a qu'un il va le trouver.
C'est ce genre de choses qui doit te donner le message d'erreur.

Mais je constate que -- contrairement à ce que j'avais compris à tort -- il ne s'agit pas de charger un fichier, mais un objet jsPDF. De la même façon que j'ai dû rechercher comment transférer un fichier, de même il faut rechercher comment charger un objet jsPDF.
Et là je ne peux pas t'aider, car je ne connais pas cet objet.
Comme cela m'intrigue, je vais essayer de trouver. Il faut bien tirer parti du confinement pour améliorer ses connaissances...

Après avoir jeté un coup d’œil sur la doc je vois qu'il s'agit d'un objet d'une librairie extérieure.
C'est de ce côté là qu'il faudrait regarder.
Personnellement je n'ai plus assez de temps à vivre pour étudier des librairies dont je n'ai pas besoin en me disant que ça pourrait me servir plus tard. J'ai déjà pas mal à faire à remettre au goût du jour des choses que j'ai écrites il y a longtemps. A l'époque on n'imaginait pas qu'il allait falloir faire marcher les pages HTML sur de écrans minuscules, le problème était plutôt de borner la taille des pades sur des grands écrans.

Modifié par PapyJP (21 Mar 2020 - 16:05)
Merci beaucoup PapyJP, ça fonctionne nickel, pour les select et input, pour les textarea j'ai fait avec getElementById.
Pour l'objet jsPDF ça fonctionne aussi!

Par-contre pour les td d'un tableau c'est plus compliqué car j'ai un retour undefined au lieu de la bonne valeur, et par name="" j'ai undefined aussi Smiley sweatdrop , je pense que c'est parce que cette valeur n'est pas saisi par l'utilisateur mais automatiquement mise par au autre script js

Je m'attend pas a ce qu'il y ai une solution miracle mais sait-on jamais, je commence a reflechir a trouver comment recuperer cette valeurs autrement ou a l'envoyer en variable entre les 2 script js Smiley mur

Voici les td :

<td name="MaxPoints" class="bord MaxPoints" id="point"></td> 
<td name="TrgtPaper" class="bord TrgtPaper" id="papier"></td> 
<td name="TrgtPaper" class="bord TrgtPaper" id="minipapier"></td> 
<td name="TrgtPopper" class="bord TrgtPopper" id="metal"></td>>
<td name="TrgtPopper" class="bord TrgtPopper" id="minimetal"></td> 
<td name="TrgtPlates" class="bord TrgtPlates" id="plate"></td>
<td name="bobber" class="bord" id="bobber"></td> 
<td name="TrgtPenlty" class="bord TrgtPenlty" id="targetNS"></td>



Voi le code ajax:

function uploadFile() {
	window.scrollTo(0, 0); //scroll page entiere du haut en bas 
				html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
					var doc = new jsPDF();
					// doc.setFontSize(40); //taille titre
							// doc.text(40, 25, "TSV STAGE MAKER") // titre
							doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)							
							var blob = doc.output('blob');	


							var nomstage = document.querySelector('[name="nomstage"]');
							var numstage = document.querySelector('[name="numstage"]');
							var FirearmId = document.querySelector('[name="FirearmId"]');
							var TrgtTypeId = document.querySelector('[name="TrgtTypeId"]');
							var ScoringId = document.querySelector('[name="ScoringId"]');
							var StartOn = document.querySelector('[name="StartOn"]');
							var StartPos = document.getElementById("StartPos");
							var Descriptn = document.getElementById("Descriptn");
							var CourseId = document.querySelector('[name="CourseId"]');
							var matchsid = document.querySelector('[name="matchsid"]');	
							var MaxPoints = document.querySelector('[name="MaxPoints"]');
							// var TrgtPaper = document.getElementById("TrgtPaper");
							// var TrgtPopper = document.getElementById("TrgtPopper");
							// var TrgtPlates = document.getElementById("TrgtPlates");
							// var TrgtPenlty = document.getElementById("TrgtPenlty");						
							var formData = new FormData();
							formData.append('pdf', blob);						
							formData.append('nomstage', nomstage.value);
							formData.append('numstage', numstage.value);
							formData.append('FirearmId', FirearmId.value);
							formData.append('TrgtTypeId', TrgtTypeId.value);
							formData.append('ScoringId', ScoringId.value);
							formData.append('StartOn', StartOn.value);
							formData.append('StartPos', StartPos.value);
							formData.append('Descriptn', Descriptn.value);
							formData.append('CourseId', CourseId.value);
							formData.append('matchsid', matchsid.value);
							formData.append('MaxPoints', MaxPoints.value);
							// formData.append('TrgtPaper', TrgtPaper.value);
							// formData.append('TrgtPlates', TrgtPlates.value);
							// formData.append('TrgtPenlty', TrgtPenlty.value);
							// formData.append('TrgtPopper', TrgtPopper.value);							
							console.log(formData);
							var xhr = new XMLHttpRequest();
							xhr.onreadystatechange = function() {
								if(this.readyState == 4 && this.status == 200) {
									alert(this.responseText);
									return;
								}
							}
							xhr.open('post', '/save-capture.php');
							xhr.send(formData);
						});
			}


Voici une parti de l'autre script qui écrit la valeur dans le td:

$("#dropzone").droppable({ //fonction qui rend la zone droppable
				//accept: "#objet1, #objet2 , #objet3 , #objet4",			
				scope: "#paper , #metal , #decor",
				drop: function(event, ui) { //fonction qui gere les evenements de drop
					if (ui.draggable.attr("alt") == "popper") {
						n = 1;
						p = 5;
						met++;
					} else if (ui.draggable.attr("alt") == "minipopper") {
						n = 1;
						p = 5;
						minimet++;
					} else if (ui.draggable.attr("alt") == "plate") {
						n = 1;
						p = 5;
						plt++;
					} else if (ui.draggable.attr("alt") == "target") {
						n = 2;
						p = 10;
						pap++;
					} else if (ui.draggable.attr("alt") == "minitarget") {
						n = 2;
						p = 10;
						minipap++;
					} else if (ui.draggable.attr("alt") == "bobber") {
						n = 2;
						p = 10;
						bob++;
					} else if (ui.draggable.attr("alt") == "targetNS") {
						n = 0;
						p = 0;
						nosh++;
					} else {
						n = 0;
						p = 0;
					}
					
					nbcoup = nbcoup + n;
					pts = pts + p;
					
					document.getElementById("nbcp").innerText = nbcoup; //ligne qui pemettent d'écrire dans le tableau en positif
					document.getElementById("point").innerText = pts;
					document.getElementById("metal").innerText = met;
					document.getElementById("papier").innerText = pap;
					document.getElementById("minimetal").innerText = minimet;
					document.getElementById("minipapier").innerText = minipap;
					document.getElementById("plate").innerText = plt;
					document.getElementById("bobber").innerText = bob;
					document.getElementById("targetNS").innerText = nosh;

Modifié par Nesyou75 (21 Mar 2020 - 22:23)
Normalement tu dois pouvoir retrouver les valeurs dans les <td> par innerHTML. Qu’est-ce qui cloche?
Modérateur
et avec textcontent au lieu de innerText ? la différence est priori qu'une histoire de vitesse de traitement et de respect des retour à la lignes si il y a . Mais as tu vérifié que : " pts ,met, pap,minipap,plt,bob et nosh renvoyé bien à une valeur ?

un élément vide à une hauteur de 0, sans padding, bordure ou height/min-height , il ne prend pas de place et on ne le voit pas.

L'intervention est peut-être naïve ou hors de propos, ce n'est pas mon meilleur domaine , je n'ai pas mis ton code en test , juste lu Smiley cligne (code que tu partage probablement incomplet et impliquant jQuery)

Cdt
Modifié par gcyrillus (22 Mar 2020 - 00:06)
Bonjour PapyJP,
Salut gcyrillus,

En faite c'est bon, j'ai réussi a obtenir ce que je voulais.
Grand merci a PapyJP pour sont aide, ci-dessous la partie ajax final qui fonctionne très bien du coup j'ai utiliser innerText au lieu de innerHTML qui me donnait un résultat mois satisfaisant!

La suite est quelque chose que je n'est jamais, envoyer les données dans un fichier XML:
il me reste plus qu'a trouver une solution pour récupérer les données de la bdd (Pas très compliqué) pour soit mettre a jour un fichier XML ou partir sur une solution de création de fichier XML et mettre tout ça en format .cab etla ça va piqué le xml finale n'est pas simple, enfin pour moi.

function uploadFile() {
	window.scrollTo(0, 0); //scroll page entiere du haut en bas 
				html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
					var doc = new jsPDF();
					// doc.setFontSize(40); //taille titre
							// doc.text(40, 25, "TSV STAGE MAKER") // titre
							doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 15, 10, 180, 280); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)							
							var blob = doc.output('blob');	


							var nomstage = document.querySelector('[name="nomstage"]');
							var numstage = document.querySelector('[name="numstage"]');
							var FirearmId = document.querySelector('[name="FirearmId"]');
							var TrgtTypeId = document.querySelector('[name="TrgtTypeId"]');
							var ScoringId = document.querySelector('[name="ScoringId"]');
							var StartOn = document.querySelector('[name="StartOn"]');
							var StartPos = document.getElementById("StartPos");
							var Descriptn = document.getElementById("Descriptn"); 
							var CourseId = document.querySelector('[name="CourseId"]');
							var matchsid = document.querySelector('[name="matchsid"]');	
							var MaxPoints = document.querySelector('[name="MaxPoints"]');
							var MinRounds = document.querySelector('[name="MinRounds"]');	
							var TrgtPaper = document.querySelector('[name="TrgtPaper"]');
							var TrgtPlates = document.querySelector('[name="TrgtPlates"]');
							var TrgtPenlty = document.querySelector('[name="TrgtPenlty"]');
							var TrgtPopper = document.querySelector('[name="TrgtPopper"]');			
							var bobber = document.getElementById("bobber");	
							var StringCnt = document.getElementById("StringCnt");	
							var ReportOn = document.getElementById("ReportOn");	
							var formData = new FormData();
							formData.append('pdf', blob);						
							formData.append('nomstage', nomstage.value);
							formData.append('numstage', numstage.value);
							formData.append('FirearmId', FirearmId.value);
							formData.append('TrgtTypeId', TrgtTypeId.value);
							formData.append('ScoringId', ScoringId.value);
							formData.append('StartOn', StartOn.value);
							formData.append('StartPos', StartPos.value);
							formData.append('Descriptn', Descriptn.value);
							formData.append('CourseId', CourseId.value);
							formData.append('matchsid', matchsid.value);
							formData.append('MaxPoints', MaxPoints.innerText);
							formData.append('MinRounds', MinRounds.innerText);
							formData.append('TrgtPaper', TrgtPaper.innerText);
							formData.append('TrgtPlates', TrgtPlates.innerText);
							formData.append('TrgtPenlty', TrgtPenlty.innerText);
							formData.append('TrgtPopper', TrgtPopper.innerText);
							formData.append('bobber', bobber.innerText);
							formData.append('StringCnt', StringCnt.value);
							formData.append('ReportOn', ReportOn.value);
							console.log(formData);
							var xhr = new XMLHttpRequest();
							// xhr.onreadystatechange = function() {
							// 	if(this.readyState == 4 && this.status == 200) {
							// 		alert(this.responseText);
							// 		return;
							// 	}
							// }
							xhr.open('post', '/save-capture.php');
							xhr.send(formData);
						});
			}

Modifié par Nesyou75 (22 Mar 2020 - 09:28)