2010-08-25 10 views
13

Est-ce que quelqu'un connaît un tutoriel sur la façon de lire des données à partir d'un fichier côté serveur avec JS? Je ne peux pas sembler trouver des sujets là-dessus quand je le google. J'ai essayé d'utiliser mais cela ne semble pas fonctionner. Je veux juste lire quelques données d'un fichier à afficher sur la page. Est-ce seulement possible?Lecture du fichier côté serveur avec Javascript

var CSVfile = new File("test.csv"); 
var result = CVSfile.open("r"); 
var test = result.readln(); 
+1

Courez-vous le JS dans une page Web? Si oui, que voulez-vous dire en lisant "fichier côté serveur", le code du script java est exécuté du côté client (navigateur) et la façon d'obtenir des fichiers du serveur est de faire une requête http. – Jaime

+2

le fichier que j'ai est stocké sur le serveur et le script s'exécutera au chargement de la page. Est-il même possible de faire cela? – shinjuo

+1

Comme d'autres le mentionnent, recherchez AJAX et utilisez jQuery ou MooTools (ou un autre framework) pour vous faciliter la tâche. – Jaime

Répondre

9

Pour ce faire, vous devrez récupérer le fichier du serveur en utilisant une méthode appelée AJAX.

Je voudrais regarder dans les bibliothèques JavaScript telles que Mootools et jQuery. Ils rendent AJAX très simple d'utilisation.

<html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script> 
     <script type="text/javascript"> 
      //This event is called when the DOM is fully loaded 
      window.addEvent("domready",function(){ 
       //Creating a new AJAX request that will request 'test.csv' from the current directory 
       var csvRequest = new Request({ 
        url:"test.csv", 
        onSuccess:function(response){ 
         //The response text is available in the 'response' variable 
         //Set the value of the textarea with the id 'csvResponse' to the response 
         $("csvResponse").value = response; 
        } 
       }).send(); //Don't forget to send our request! 
      }); 
     </script> 
    </head> 
    <body> 
     <textarea rows="5" cols="25" id="csvResponse"></textarea> 
    </body> 
</html> 

Si vous téléchargez que le répertoire qui test.csv réside dans votre serveur Web et chargez la page, vous devriez voir le contenu de test.csv apparaissent dans la zone de texte défini.

+0

Pensez à utiliser une version plus récente de mototools parce que vous avez de très mauvais conflits avec JQuery vous pouvez utiliser -> GOXR3PLUS

7

Vous devez utiliser AJAX. Avec la bibliothèque jQuery le code peut ressembler à ceci:

 
$.ajax({ url: "test.csv", success: function(file_content) { 
    console.log(file_content); 
    } 
}); 

ou si vous ne souhaitez pas utiliser les bibliothèques utilisent objet XMLHttpRequest brut (mais vous I a des noms différents sur les différents navigateurs

 
function xhr(){ 
    var xmlHttp; 
    try{ 
    xmlHttp=new XMLHttpRequest(); 
    } catch(e) { 
    try { 
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch(e) { 
     try { 
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch(e) { 
     alert("Your browser does not support AJAX!"); 
     return false; 
     } 
    } 
    } 
    return xmlHttp; 
} 
req = xhr(); 
req.open("GET", "test.cvs"); 
req.onreadystatechange = function() { 
    console.log(req.responseText); 
}; 
req.send(null); 

MISE À JOUR 2017 il y a de nouvelles chercher api, vous pouvez l'utiliser comme ceci:

fetch('test.csv').then(function(response) { 
    if (response.status !== 200) { 
     throw response.status; 
    } 
    return response.text(); 
}).then(function(file_content) { 
    console.log(file_content); 
}).catch(function(status) { 
    console.log('Error ' + status); 
}); 

the support is pretty good si vous avez besoin pour soutenir navigateur ne supporte pas fetch API vous pouvez utiliser polyfill que github created

+8

Essayez de donner des réponses plus utiles. Nous aimons voir des réponses qui valent mieux que «go to google». – Oded

+2

Je voudrais downvote cette réponse, mais j'ai déjà atteint ma limite quotidienne, alors prenez-le comme un avertissement :-) –

+0

Très belle solution JQuery. – GOXR3PLUS

Questions connexes