Je crée une page Web avec un bouton pour charger des données à partir du serveur à l'aide de la construction API de repos via ExpressJs, Nodejs.
p>
<button >Load from server</button>
<div></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','button', function(){
$.ajax({
url: "http://localhost:3000/search"
}).done(function() {
$('div').append("done !!! - ");
});
});
});
</script>5 Réponses :
Voici le code que j'utilise lorsque je souhaite utiliser une page simple index.html pour tester un code frontal.
app.get(/^(.+)$/, function(req, res){
res.sendFile( __dirname + req.params[0]);
});
Le problème que vous avez est que vous utilisez Express comme cadre de rendu. Si vous souhaitez créer une application avec Repos / API, le cadre ne doit pas rendre les vues ou les modèles. La navigation sur la page Web doit être séparée (E. JS angulaires). Dans votre cas, lorsque vous appelez / recherchez, vous appelez en réalité quelque chose sur le serveur sans aucune instruction de rendu. C'est pourquoi vous voyez un objet JSON de réponse au lieu de votre modèle HTML.
Alors, que faire? : 3000 / API / recherche) et avec le contenu de la réponse font quelque chose: comme remplir une table, leur montrant d'une manière ou d'une autre.
Je vous recommande de donner un essai de JS anguleux. Je suis sûr que cela peut vous aider
acclamations
J'ai créé un fichier d'index à l'aide d'un simple fichier angulaire et html ... Comment exécuter un fichier d'index .... Si je l'exécute localhost: 3000 / Index Il est indiqué que je ne peux pas obtenir d'index ... Si je cours sur XAMPP ou WAMPP appelant ... Frapper le bouton Dit Cross Domian, comme le numéro de port est différent pour Apache et ExpressJS Server.
Vous êtes toujours confus sur la façon de rendre quelque chose localement. Ce qui n'est certainement pas appelant localhost: 3000 / Index -> Ceci appelle un serveur et non un fichier d'index local.
Je suis confus que c'est pourquoi j'ai posé cette question ... Rendre la page d'index locale et appeler une API reposante à celle-ci sur un événement
Op ne demande pas comment faire cela avec angulaire. Basé sur l'extrait qu'il post, il peut totalement le faire sans apprendre un nouveau cadre ..
Mise à jour strong>: OP demande: p> "ma question n'est pas ce mot de code .... ma question est de savoir comment changer la
de sorte que le code fonctionne comme express.js API RESTful et non le moteur de rendu " p>
Blockquote> Pour utiliser Express comme API RESTful ici, vous devez d'abord servir une page statique. 1 est expliquée dans le 2ème partie de ma réponse strong>. J'explique pourquoi cela ne fonctionne pas dans le première partie de ma réponse strong>. Vous ne pouvez pas simplement chercher à Réponse d'origine:. Strong> p> Pour comprendre ce qui se passe ici, il pourrait être une bonne idée de regarder comment vous traiter les demandes dans votre code Serverside: p> Quand je cours http: // localhost: 3000 / recherche dans le navigateur, il me donne une sortie avec « nom "de la base de données. p>
Blockquote> Ce code est: p>
Dit autrement, voici les étapes:
1. Procurez-vous votre serveur express pour servir une page statique strong>.
2. Ensuite, obtenir le bouton sur cette page pour faire un GET code> demande à votre point final api à / search code> (quand on clique dessus). P>
2 devrait déjà un travail, il vous suffit de servir la page et cliquez sur le bouton! P> / search code>. Je pense que c'est ce que vous entendez par "ne pas l'utiliser comme moteur de rendu" p>
app.get('/', function(req,res) {
res.sendfile('public/index.html');
});
Ma question n'est pas ce que dit le code ... Ma question est de savoir comment changer le code de sorte que ExpressJS fonctionne comme une API reposante et non du moteur de rendu
Salut! J'ai l'impression d'avoir répondu à cette question (en expliquant comment vous pouvez servir une page statique, et utiliser cette page pour effectuer votre recherche , utilisez donc Express comme une API reposante). Ma réponse répond à vos questions au fond ... "Quand j'exécute localhost: 3000 / Rechercher dans le navigateur Donne-moi une sortie avec "Nom" de la base de données. Mais comment puis-je voir la page index.html et le faire en charge sur le bouton "" Pouvez-vous s'il vous plaît essayer de lire à nouveau et expliquer ce que vous ne comprenez pas? Je vais essayer de reformuler ma réponse. Merci!
Mis à jour. J'espère que cela aide!
En fait, je cherchais juste l'application ("/", express.static (__ dirname)); Mais merci de m'expliquer les choses.
Cool! Cette question finit par être similaire à ce que vous demandiez. Vérifiez-le si vous avez d'autres questions ou souhaitez servir des fichiers dans une structure de fichier imbriquée.
1-Vous devez ajouter routage pour index.html puis dans votre code AJAX, vous pouvez rediriger vers / index en utilisant la fenêtre 2- Vous pouvez directement rendre index.html.
Quelque chose comme ça }); puis redirige vers la page sur
Je ne veux pas faire passer par Express. Juste appel de l'API reposant à travers Express. Comme dans C #, nous avons dites une page Index.html exécutée sur un serveur et nous utilisons AJAX pour appeler la méthode de fichier WebServices (ASMX ou SVC) .....
@ghost ... alors vous devez utiliser des frameworks de spa comme Angularjs, Backbone ReactJs, etc.
Je peux utiliser angulaire mais pas sûr comment exécuter ce fichier car je reçois un problème de domaine croisé
Essayez un tutoriel angularjs. Peu de temps, vous allez bien ce qui se passe mal et quelle est la bonne façon. Adrianmejia.com / Blog / 2014/09/28 / ...
<button >Load from server</button>
<div></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','button', function(){
$.ajax({
url: "http://localhost:3000/search"
}).done(function(data) {
$('div').append(data);
});
});
});
</script>
you can read the documentation about $.ajax() from jquery api documentation
http://api.jquery.com/jQuery.ajax/
Je pense que vous voudrez peut-être charger des fichiers HTML à l'aide d'Express, car vous pouvez utiliser Express Serve static Github.com/ ExpressJs / Service-Static