3 façons d’exécuter la fonction PHP dans le didacticiel JavaScript

Posté Par: Windows2022tutosur: octobre 24, 2022Dans: TechPas De Commentaires

Introduction

Dans ce tutoriel, je vais vous montrer le 3 différentes façons efficaces d’exécuter des fonctions PHP en JavaScript. Le tutoriel vise à fournir aux étudiants et aux nouveaux programmeurs une référence pour apprendre à améliorer leurs compétences en programmation en utilisant Langage PHP et Javascript. Ici, des extraits et des exemples de code source seront fournis pour une meilleure compréhension de l’utilisation des scripts.

Qu’est-ce que la fonction PHP ?

Langage PHP est livré avec plus de 1000 fonctions intégrées. Le développeur peut également créer ses propres fonctions pour bien organiser son script et le rendre réutilisable. La Fonction PHP est un bloc d’instructions et de codes qui peuvent être utilisés à plusieurs reprises, même lors du chargement d’une seule page ou de l’exécution d’une page. La fonction ne s’exécutera pas automatiquement au chargement de la page. Chaque fonction ne s’exécutera que lorsque le développeur appellera le nom de la fonction à exécuter sur l’autre partie de ses scripts.

Technologies nécessaires

Les extraits que je vais fournir à titre d’exemple pour démontrer les moyens efficaces d’exécution de fonctions PHP dans JS nécessitent les technologies suivantes :

Serveur Web pouvant exécuter un script PHP c’est à dire (XAMPP/WAMP)
Bibliothèque jQuery

Comment exécuter la fonction PHP dans JavaScrtip ?

PHP peut exécuter facilement une fonction JS, mais l’exécution d’une fonction PHP à l’aide de JavaScript est assez délicate car les scripts PHP sont des scripts côté serveur tandis que JavaScript s’exécute côté client. Bien que, dans certains cas, nous devions peut-être exécuter des fonctions PHP à l’aide de JS pour répondre aux exigences de notre projet. Pour réaliser l’idée de Exécuter une fonction PHP en JavaScriptnous pouvons utiliser la méthode suivante :

Exécution directe de fonctions PHP dans JS
Exécution de fonctions PHP à l’aide de l’API JS Fetch
Exécution de fonctions PHP avec JS jQuery Ajax

Ce sont les moyens efficaces d’exécuter votre fonction PHP en JavaScript. La première méthode que j’ai fournie ne fonctionnera que si les paramètres ou arguments de la fonction PHP sont statiques, tandis que les 2 autres méthodes peuvent gérer le passage de données dynamiques.

Exemple

Exécution directe de fonctions PHP dans JS

Voici un extrait d’exemple pour l’exécution d’une fonction PHP en JavaScript. De cette façon, il exécute directement la fonction PHP.

/**
* Direct PHP Exection in JS
* – only works when the paramaters are static
*/
document.getElementById(‘testButton1’).addEventListener(‘click’, function(e){
var php_func_exec1 = <?= example(‘1’, [‘test’ => ‘Hello World!’]) ?>;
console.log(php_func_exec1);
})

Le script ci-dessus exécute un Fonction PHP avec des arguments ou des paramètres statiques. Ce mode d’exécution ne peut pas gérer la transmission de données dynamiques. La fonction PHP s’exécutera automatiquement au chargement de la page.

Résultat

Voici le résultat de l’exemple d’extrait ci-dessus.

Exécution de fonctions PHP à l’aide de l’API JS Fetch

Vous trouverez ci-dessous un extrait d’exemple pour exécuter le Fonction PHP en JavaScript à l’aide de l’API Fetch. De cette façon, crée une demande et reçoit la réponse. De cette manière, les développeurs peuvent transmettre des données dynamiques.

/**
* PHP Exection in JS using Fetch API
* – works when the paramaters are static or dynamic
*/
document.getElementById(‘testButton2’).addEventListener(‘click’, function(e){
var param1 = ‘This a sample Execution using JS Fetch API’,
param2 = `{« a » : « Lorem », « b » : « Ipsum »}`
var form = new FormData();
form.append(‘param1’, param1)
form.append(‘param2’, param2)
fetch(‘index.php’,{
method:‘POST’,
body: form,
}).then(response => {
return response.json()
}).then(data => {
console.log(data.parameter1)
console.log($.parseJSON(data.parameter2))
})
})

L’extrait soumet une demande à une autre page et contient des données POST qui peuvent être récupérées et récupérées sur la page distante. Le script n’exécutera pas la fonction PHP sur la page en cours, mais à la place, l’exécution sera effectuée à distance à l’URL fournie et le script ne captera que la réponse de la requête.

Résultat

Voici le résultat de l’exemple d’extrait ci-dessus.

Exécution de fonctions PHP avec JS jQuery Ajax

L’extrait ci-dessous fonctionne de la même manière que la 2ème méthode que j’ai fournie. Le script vous oblige à charger la bibliothèque jQuery sur la page.

/**
* PHP Exection in JS using Ajax of jQuery
* – works when the paramaters are static or dynamic
*/
document.getElementById(‘testButton3’).addEventListener(‘click’, function(e){
var param1 = ‘This a sample Execution using JS jQuery Ajax’,
param2 = `{« a » : « Lorem », « b » : « Ipsum »}`
$.ajax({
url:« index.php »,
method:‘POST’,
data: {param1:param1, param2: param2},
dataType:‘json’,
error: error => {
console.error(error)
},
success:function(response){
console.log(response.parameter1)
console.log($.parseJSON(response.parameter2))
}
})
})

Résultat

Voici le résultat de l’exemple d’extrait ci-dessus.

C’est ça! Vous pouvez également télécharger l’exemple de programme ou d’application Web que j’ai créé et qui illustre l’utilisation des 3 façons efficaces d’exécuter les fonctions PHP en JavaScript. Vous pouvez télécharger le code source gratuitement en cliquant sur le bouton de téléchargement sous cet article. N’hésitez pas à modifier le code pour faire d’autres expériences afin de mieux comprendre le script.

C’est la fin de ce tutoriel. J’espère que ce tutoriel vous aidera avec ce que vous recherchez et que vous le trouverez utile pour vos projets futurs et actuels.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.