PHP Lang
  1. PHP Lang
  3. Angularjs и jquery не работают в моей обычной простой форме
Intereting Posts
Тернарные операторы в Twig php (сокращенная форма if-then-else) Открытая ошибка zipArchive в PHP Ошибка синтаксиса PHP «неожиданный конец $ end» Комментируйте HTML и PHP вместе Laravel как выводить записи db как XML? Пользовательский форматированный JSON от MYSQL PDO для использования в NVD3.js Laravel – нетерпеливая загрузка метода (а не отношения) модели Eloquent Ошибка T_BOOLEAN_AND? Класс «JFactory» не найден Как сохранить вложение изображений из электронной почты с помощью IMAP и PHP? PHP-скрипт, чтобы оставаться на несколько секунд на одной странице и перенаправлять Создание случайных результатов по весу в PHP? phpQuery игнорирует часть импортированного файла Как создавать эскизы или предварительный просмотр видео? Измените количество продуктов, отображаемых на странице категории «xyz» категории WooCommerce

Angularjs и jquery не работают в моей обычной простой форме

Я изучаю Angularjs, и я создал простую форму. На самом деле я разработчик PHP, поэтому я предпочел использовать php в качестве языка сценариев на стороне сервера. Я не могу отправить данные на сервер, я пробовал так много методов, но это очень сложно, если я пытаюсь использовать стандартный метод. Angularjs не работает, пожалуйста, проверьте мой код и дайте мне лучший метод работы с angularjs, jquery и php. Помоги мне! 

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>

    Обновлено , это код, который был протестирован только с php и Apache – и он работает. Я также изменил файл server.php, как показано ниже. Файл был создан на основе примера серверных вызовов AngularJS Hub. Тот же источник использовался для создания вызова метода mainController.js $ http.post (…), чтобы он успешно отправлял данные на сервер.

    Скриншот (после отправки)

    введите описание изображения здесь

    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

    Альтернативный способ: с обработкой 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); } ?>

    Скриншот (после отправки)

    Скриншот

    Кажется, из вашего кода вы неправильно поняли некоторые концепции.

    1. Вы вообще не используете jQuery – вы можете удалить его, если только parsely (не знакомый с этим …) требует его
    2. Все теги HTML, кроме DOCTYPE должны находиться внутри корневого тега html . Рекомендуется добавить JS в нижней части тега body который (концептуально) будет способствовать производительности загрузки страницы.
    3. Заказ JS, который вы импортируете, важен и должен быть зависимым (например: AngularJS может использовать jQuery только в том случае, если он включен, но в вашем случае угловой не знает об этом, так как jQuery добавляется после AngularJS, что заставляет Angular строить свой jq lite вместо)
    4. Вы добавили submitData в область своего контроллера, но вы его никогда не называете. Возможно, ваше намерение было использовать его, когда пользователь отправляет форму, поэтому вам нужно удалить атрибуты action и method из формы и добавить ng-submit : <form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')"> . Оба аргумента являются избыточными, так как вы используете их в области $scope .
    5. Аргумент config переданный с помощью службы $http используется для конфигураций, а не для данных. Читайте здесь: Угловые $ http
    6. поведение по умолчанию $http отправляет JSON в качестве тела запроса. Кажется, что вы ожидаете формы на вашем PHP-коде. Например, это можно изменить в config , или вы можете узнать, как десериализовать JSON на PHP (извините, я не знаю PHP).
    7. Добавьте свойство, в которое вы хотите сохранить данные, в область $scope чтобы можно было визуализировать.

    Исправлено предложение кода клиента: 

     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>

    Вы используете угловую форму и отправляете данные из контроллера внутри, тогда не стоит упоминать action="server.php" method="post" потому что вы собираетесь выполнять этот вызов с контроллера, то есть $http.post('server.php') .

    Просто добавьте ng-submit="submitData(person, 'result')" директива в свой тег формы, которая вызовет ваш метод контроллера, который отправляет данные, и ваш код начнет работать.

    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>

    Надеюсь, это может вам помочь. Благодарю.