Javascript Girl
  1. Javascript Girl
  3. Angularjs et jquery ne fonctionnent pas sous ma forme simple et régulière
Intereting Posts
Spécifiez la plage de nombres à saisir dans le champ numéro à l'aide de javascript Évitez les vues partielles angularJS à mettre en cache dans IE Redirection retardée? Comment textract & client = de url? Fonctions de flèche vs fonctions de flèche de graisse Vérifiez si l'élément contient l'une des classes du tableau Version JavaScript simple de e.preventDefault (); Pourquoi le scrollWidth n'intéresse-t-il que le rembourrage gauche? Accéder aux éléments de la fenêtre parent de l'iframe Comment utiliser l'indice dans une balise de saisie de texte html? Center Google Maps InfoWindow On Load Jquery this versus $ (this) et peut-être même $ this Une explication plus claire de la récursivité et du flux d'exécution en JavaScript? La longueur du tableau diffuse dans Internet Explorer avec la virgule traînante Position de la division HTML 5

Angularjs et jquery ne fonctionnent pas sous ma forme simple et régulière

J'apprends Angularjs et j'ai créé une forme simple. En fait, je suis développeur PHP, j'ai préféré utiliser php comme langue de script côté serveur. Je ne peux pas soumettre les données au serveur, j'ai essayé tant de méthodes, mais celles-ci sont très complexes si j'essaie en mode standard. Angularjs ne fonctionne pas, vérifiez mon code et donnez-moi la meilleure méthode pour travailler avec angularjs, jquery et php. Aidez moi! 

angular.module("mainModule", []) .controller("mainController", function($scope, $http) { $scope.person = {}; $scope.serverResponse = ''; $scope.submitData = function() { var config = { headers: { "Content-Type": "application/x-www-form-urlencoded" } }; $http.post("server.php", $scope.person, config) .success(function(data, status, headers, config) { $scope.serverResponse = data; }) .error(function(data, status, headers, config) { $scope.serverResponse = "SUBMIT ERROR"; }); }; }); 
 <?php if (isset($_POST["person"])) { // AJAX form submission $person = json_decode($_GET["person"]); $result = json_encode(array( "receivedName" => $person->name, "receivedEmail" => $person->email)); } else { $result = "INVALID REQUEST DATA"; } echo $result; ?> 
 <!DOCTYPE html> <html> <head> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <form name="personForm1" novalidate ng-submit="submitData()"> <label for="name">First name:</label> <input id="name" type="text" name="name" ng-model="person.name" required /> <br /> {{person.name}} <br /> <label for="email">email:</label> <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> <br /> <br /> <button type="submit">Submit</button> </form> <br /> <div> {{$scope.serverResponse}} </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!--<script type="text/javascript" src="script/parsley.js"></script> <script src="script.js"></script>--> </body> </html>

Mise à jour , c'est un code qui a été testé avec php et Apache – et ça marche. J'ai également changé votre fichier server.php comme ci-dessous. Le fichier a été créé en fonction de l' exemple d'appel de serveur du Hub AngularJS. La même source a été utilisée pour créer l'appel de méthode mainController.js ' $ http.post (…) afin qu'il publie correctement les données sur le serveur.

Capture d'écran (après la soumission)

Entrez la description de l'image ici

Server.php 

 <?php if ($_SERVER["REQUEST_METHOD"] === "POST") { $result = "POST request received!"; if (isset($_GET["name"])) { $result .= "\nname = " . $_GET["name"]; } if (isset($_GET["email"])) { $result .= "\nemail = " . $_GET["email"]; } if (isset($HTTP_RAW_POST_DATA)) { $result .= "\nPOST DATA: " . $HTTP_RAW_POST_DATA; } echo $result; } ?>

PersonForm.html 

  <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <form name="personForm1" validate ng-submit="submit()"> <label for="name">First name:</label> <input id="name" type="text" name="name" ng-model="person.name" required /> <br /> {{person.name}} <br /> <label for="email">email:</label> <input id="email" type="text" name="email" ng-model="person.email" required /> <br /> <br /> <button type="submit">Submit</button> </form> <br /> <div> {{serverResponse}} </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script src="mainController.js"></script> <!--<script type="text/javascript" src="script/parsley.js"></script> <script src="script.js"></script>--> </body> </html>

MainController.js 

 angular.module("mainModule", []) .controller("mainController", function ($scope, $http) { $scope.person = {}; $scope.serverResponse = ""; $scope.submit = function () { console.log("form submit"); var params = { name: $scope.person.name, email: $scope.person.email }; var config = { params: params }; $http.post("server.php", $scope.person, config) .success(function (data, status, headers, config) { console.log("data " + data + ", status "+ status + ", headers "+ headers + ", config " + config); $scope.serverResponse = data; console.log($scope.serverResponse); }) .error(function (data, status, headers, config) { console.log("error"); $scope.serverResponse = "SUBMIT ERROR"; }); }; });// JavaScript source code

Forme alternative, avec la manipulation JSON:

Server_json.php 

 <?php if ($_SERVER["REQUEST_METHOD"] === "POST") { /* code source: http://stackoverflow.com/a/22852178/2048391 */ $data = array(); $json = file_get_contents('php://input'); // read JSON from raw POST data if (!empty($json)) { $data = json_decode($json, true); // decode } print_r($data); } ?>

Capture d'écran (après la soumission)

Capture d'écran

Il semble de votre code que vous avez mal compris certains concepts.

  1. Vous n'utilisez pas jQuery du tout – vous pouvez l'enlever à moins d'être parés (pas familier avec celui-ci …) l'exige
  2. Tous les tags HTML en plus du DOCTYPE doivent être dans la balise html racine. Il est recommandé d'ajouter JS au bas de l'étiquette du body qui contribuera (de manière conceptuelle) aux performances de la charge de page.
  3. L'ordre de JS que vous importez est important et devrait être par des dépendances (par exemple: AngularJS peut utiliser jQuery uniquement s'il est inclus, mais dans votre cas angulaire ne le sait pas car le jQuery est ajouté après AngularJS qui amène Angular à construire son jq lite au lieu)
  4. Vous avez ajouté un submitData à la portée de votre contrôleur, mais vous ne l'appelez jamais – votre intention était probablement de l'utiliser lorsque l'utilisateur soumet le formulaire afin que vous devez supprimer action attributs d' action et de method du formulaire et ajouter ng-submit : <form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')"> . Les deux arguments sont redondants puisque vous les avez sur la $scope .
  5. L'argument de config envoyé avec le service $http est utilisé pour les configurations, pas les données. Lisez ici: Angular $ http
  6. Le comportement par défaut de $http envoie JSON comme corps de la requête. Il semble que vous attendiez un formulaire sur votre code PHP. Cela peut être changé dans la config par exemple, ou vous pouvez apprendre à désérialiser les JSON sur PHP (désolé, je ne connais pas PHP).
  7. Ajoutez la propriété sur laquelle vous souhaitez enregistrer les données sur la $scope afin qu'elle puisse être rendue.

Suggestion de code client fixe: 

 angular.module("mainModule", []) .controller("mainController", function($scope, $http) { $scope.person = {}; $scope.serverResponse = ''; $scope.submitData = function() { // Let's say that your server doesn't expect JSONs but expects an old fashion submit - you can use the `config` to alter the request var config = { headers: { "Content-Type": "application/x-www-form-urlencoded" } }; $http.post("server.php", $scope.person, config) // You can remove the `config` if the server expect a JSON object .success(function(data, status, headers, config) { $scope.serverResponse = data; }) .error(function(data, status, headers, config) { $scope.serverResponse = "SUBMIT ERROR"; }); }; }); 
 <!DOCTYPE html> <html> <head> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <form name="personForm1" novalidate ng-submit="submitData()"> <label for="name">First name:</label> <input id="name" type="text" name="name" ng-model="person.name" required /> <br /> {{person.name}} <br /> <label for="email">email:</label> <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> <br /> <br /> <button type="submit">Submit</button> </form> <br /> <div> {{$scope.serverResponse}} </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!--<script type="text/javascript" src="script/parsley.js"></script> <script src="script.js"></script>--> </body> </html>

Vous utilisez la forme angulaire et publiez les données du contrôleur en interne, alors vous ne devez pas supposer mentionner action="server.php" method="post" car vous allez faire cet appel du contrôleur, à savoir $http.post('server.php') .

Il suffit d'ajouter ng-submit="submitData(person, 'result')" dans votre étiquette de formulaire, qui appellera votre méthode de contrôleur qui publie des données et que votre code va commencer à fonctionner.

HTML 

 <form name="personForm1" novalidate ng-submit="submitData(person, 'result')"> <label for="name">First name:</label> <input id="name" type="text" name="name" ng-model="person.name" required /> <br />{{person.name'}} <label for="email">Last name:</label> <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> <br /> <br /> <button type="submit">Submit</button> </form>

J'espère que cela pourrait vous aider. Merci.