Comment récupérer des données d’un fichier en utilisant ajax en cliquant sur les rangées d’un tableau

J’essaie d’extraire les données des fichiers en utilisant Ajax en cliquant sur une ligne du tableau (en transmettant les valeurs d’une ligne à un bouton en cliquant sur une ligne) ou en entrant les variables dans une zone de texte et en appuyant sur le bouton. Mais cela ne semble pas fonctionner (les pls ne consumnt pas car je suis un programmeur C ++ et j’apprends le développement web. )

        ID  Value  Name  Cell #  Nickname  
 
   2  54235  Benjamin Lloyd  (801) 123-456  Ben  
  2  44235  XXXXXX  642363673  TRE  
 
 
   ID:
 Value:
 
 This is DIV element which will be filled by div element on clicking button or by clicking table row which also generate the event and click the button by passing values to ajax and fetchign data. 
 
   $(document).ready(function(){ $("button").click(function(){ //here ID and value are parsed through table click event or from text box on clicking button $.ajax({ url:filename, data: { ID: $("input#id").val(), Value: $("input#value").val() }, success:function(result){ $("#tabs").html(result); }}); var filename= "Data_"+ID+"_"+Value+".txt"; $("#tabs").load(filename); }); }); var table = document.getElementsByTagName("table")[0]; var tbody = table.getElementsByTagName("tbody")[0]; tbody.onclick = function (e) { e = e || window.event; var data = []; var target = e.srcElement || e.target; while (target && target.nodeName !== "TR") { target = target.parentNode; } if (target) { var cells = target.getElementsByTagName("td"); for (var i = 0; i < 2; i++) { data.push(cells[i].innerHTML); } } alert(data); };

ID	Value	Name	Cell #	Nickname
2	54235	Benjamin Lloyd	(801) 123-456	Ben
2	44235	XXXXXX	642363673	TRE

cat Data_2_54235.txt

 Nice Work! Your code is working with first file.

cat Data_2_44235.txt

 Nice Work! Your code is working with second file.

Comment puis-je implémenter le code ci-dessus.

Je vois que vous générez un nom de fichier basé sur des valeurs d’entrée. Cela signifie que l’appel ajax sera effectué sur ce nom de fichier, ce qui est étrange, car vous devez créer un fichier portant ce nom.

En tout cas, je ne vois nulle part dans votre code qu’en cliquant sur les lignes d’un tableau, vous effectuez un appel ajax, vous enregistrez uniquement le texte innerHTML dans une variable data = [] , puis l’ alert . Mais le problème n’est pas là (si vous ne vous attendez pas à effectuer un appel ajax lorsque vous cliquez sur des lignes de table), mais il se trouve à l’intérieur de l’appel ajax que vous effectuez lorsque vous cliquez sur le bouton.

premier

 url:filename var filename= "Data_"+ID+"_"+Value+".txt";

Je suggère fortement que vous ne faites pas ça. Cela fonctionnera si vous appelez ajax à un script php qui crée ce fichier txt avec le filename de filename , puis effectuez un autre appel ajax vers ce fichier et récupérez-le.

seconde

 data: { ID: $("input#id").val(), Value: $("input#value").val() }

regardez ici les données, le doc l’explique. le code ci-dessus signifie que pour nommer le fichier, il passera des parameters (parameters GET, c’est-à-dire x? = …), mais comme votre fichier est .txt, cela n’a aucun sens.

troisième

 $("#tabs").load("demo_test.txt");

Cela appenda le texte à l’intérieur de demo_test.txt à $ (“# tabs”), comme le fait innerHTML ou .html (). Avez-vous demo_test.txt sur votre hôte? Je suppose que cela devrait fonctionner.

changez simplement votre appel ajax et chargez un appel avec cela. cela devrait fonctionner:

 $("button").click(function() { $.ajax({ url : "demo_test.txt", dataType: "text", success : function (data) { $("#tabs").html(data); } }); });

Pour cliquer sur les lignes de table, ajoutez simplement un écouteur d’événement à des lignes de table et effectuez un appel ajax. lisez le lien que je vous envoie, car il est important de mieux comprendre ce qu’est ajax.

Vous pouvez voir qu’aucun paramètre de données non nécessaire n’est jeté dans un appel ajax, et j’y ai placé un type de données, ce qui signifie que nous nous attendons à recevoir des données texte. Si cela ne fonctionne pas, vous devez être sûr de travailler sur le serveur localhost (pour que ajax fonctionne …) et que vous avez demo_test.txt, et que l’URL est correctement passée.

Exemple d’utilisation de valeurs d’entrée à extraire d’ajax:

 $("button").click(function() { var id = $("input#id").val(); var value = $("input#value").val(); $.ajax({ url : "Data_" + id + "_" + value + ".txt", dataType: "text", success : function (data) { $("#tabs").html(data); }, error: function (data) { #("#tabs").html('No such file found on server'); } }); });

exemple de gestionnaire d’événement, cliquez sur

 $("table tbody").on("click", "tr", function() { var id = $(this).find("td")[0].text(); // gets the first td of the clicked tr (this is the ID i suppose) var value = $(this).find("td")[1].text(); // gets the second td of the clicked tr (this is the VALUE i suppose) $.ajax({ url : "Data_" + id + "_" + value + ".txt", dataType: "text", success : function (data) { $("#tabs").html(data); }, error: function (data) { #("#tabs").html('No such file found on server'); } }); });