2017-04-13 255 views
0

編輯:形式將觸發PHP代碼,並導致其空數據寫信給我的JSON文件。我怎樣才能讓我的角度形式發送正確的數據到我的PHP代碼?Angular.js,PHP,JSON形式不工作

我是angular.js的新手,我一直沒有在php工作過一段時間,但我正在嘗試構建一個非常簡單的角度表單,並將數據發送到一個php文件,然後寫入信息到JSON文件。角度表單位於不同於php和JSON文件的服務器上。下面是我到目前爲止有:

索引頁:

<!DOCTYPE html> 
<html lang="en" data-ng-app="myApp"> 
    <head> 
    <title>AngularJS Form</title> 
    <script type="text/javascript" src="http://code.angularjs.org/1.2.25/angular.min.js"></script> 
    <script type="text/javascript" src="js/modules/promise-tracker.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    </head> 
    <body class="container"> 

    <h2>AngularJs form</h2> 

    <p>This is an AngularJs based form. It uses a controller to handle form validation and submission.</p> 
    <p>Find a step by step tutorial on this form at <a href="https://www.lullabot.com/blog/article/processing-forms-angularjs">the Lullabot Blog</a>.</p> 
    <a href="https://github.com/juampy72/angularjs_form"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a> 

    <div data-ng-controller="help"> 
    <div id="messages" class="alert alert-success" data-ng-show="messages" data-ng-bind="messages"></div> 
    <div data-ng-show="progress.active()" style="color: red; font-size: 50px;">Sending&hellip;</div> 
    <form name="helpForm" novalidate role="form"> 
     <div class="form-group"> 
     <label for="name">Your Name </label> 
     <span class="label label-danger" data-ng-show="submitted && helpForm.name.$error.required">Required!</span> 
     <input type="text" name="name" data-ng-model="name" class="form-control" required /> 
     </div> 

     <div class="form-group"> 
     <label for="comments">Description</label> 
     <span class="label label-danger" data-ng-show="submitted && helpForm.comments.$error.required">Required!</span> 
     <textarea name="comments" data-ng-model="comments" class="form-control" required></textarea> 
     </div> 

     <button data-ng-disabled="progress.active()" data-ng-click="submit(helpForm)" class="btn btn-default">Submit</button> 
    </form> 
    </div> 

    </body> 
</html> 

角代碼:

/** 
* AngularJS module to process a form. 
*/ 
angular.module('myApp', ['ajoslin.promise-tracker']) 
    .controller('help', function ($scope, $http, $log, promiseTracker, $timeout) { 
    $scope.subjectListOptions = { 
     'bug': 'Report a Bug', 
     'account': 'Account Problems', 
     'mobile': 'Mobile', 
     'user': 'Report a Malicious User', 
     'other': 'Other' 
    }; 

    // Inititate the promise tracker to track form submissions. 
    $scope.progress = promiseTracker(); 

    // Form submit handler. 
    $scope.submit = function(form) { 
     // Trigger validation flag. 
     $scope.submitted = true; 

     // If form is invalid, return and let AngularJS show validation errors. 
     if (form.$invalid) { 
     return; 
     } 

     // Default values for the request. 
     var config = { 
     params : { 
      'callback' : 'JSON_CALLBACK', 
      'name' : $scope.name, 
      'comments' : $scope.comments 
     }, 
     }; 

     // Perform JSONP request. 
     var $promise = $http.jsonp('process.php', config) 
     .success(function(data, status, headers, config) { 
      if (data.status == 'OK') { 
      $scope.name = null; 
      $scope.comments = null; 
      $scope.messages = 'Your form has been sent!'; 
      $scope.submitted = false; 
      } else { 
      $scope.messages = 'Oops, we received your request, but there was an error processing it.'; 
      $log.error(data); 
       console.log($scope.name); 
      } 
     }) 
     .error(function(data, status, headers, config) { 
      $scope.progress = data; 
      $scope.messages = 'There was a network error. Try again later.'; 
      $log.error(data); 
      console.log('name:', $scope.name); 
     }) 
     .finally(function() { 
      // Hide status messages after three seconds. 
      $timeout(function() { 
      $scope.messages = null; 
      }, 3000); 
     }); 

     // Track the request and show its progress to the user. 
     $scope.progress.addPromise($promise); 
    }; 
    }); 

PHP代碼:

<?php 

    $myFile = "data.json"; 
    $arr_data = array(); // create empty array 

    try 
    { 
     //Get form data 
     $formdata = array(
      'name'=> $_POST['name'], 
      'comments'=> $_POST['comments'], 
     ); 

     //Get data from existing json file 
     $jsondata = file_get_contents($myFile); 

     // converts json data into array 
     $arr_data = json_decode($jsondata, true); 

     // Push user data to array 
     array_push($arr_data,$formdata); 

     //Convert updated array to JSON 
     $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT); 

     //write json data into data.json file 
     if(file_put_contents($myFile, $jsondata)) { 
      //echo 'Data successfully saved'; 
     } 
     else 
      echo "error"; 

    } 
    catch (Exception $e) { 
      echo 'Caught exception: ', $e->getMessage(), "\n"; 
    } 

?> 
+0

歡迎來到Stack Overflow!你的問題是什麼?你已經發布了一堆代碼,但沒有說明你面臨的問題,如果你沒有說出什麼問題,我們根本無法提供幫助。考慮[參考]並檢查[幫助]以獲取更多信息,尤其是[問]頁面以及如何編寫[mcve]。如果可以,我期待着提供幫助,但這裏沒有任何事情可以採取行動。 – Delioth

+0

對不起。我想我真的不知道如何詞組這個問題,但我的角形式觸發我的PHP代碼運行,但PHP代碼不寫相應的數據TOT他JSON文件,角碼返回錯誤。我想知道如何解決這個問題? – kyofanatic1

+0

你的頭銜應該是什麼意思? Angularjs比php更好,php比json更好?還是你給他們數值?是某種有條件的嗎?或者它只是無稽之談。 –

回答

0

因此,爲了解決我的問題,我簡化了我的代碼。我離開了我的php代碼,但我最終使用了一個簡單的HTML表單,在頁面中使用了一點javascript。我的新代碼完美的工作如下。

<!DOCTYPE html> 
<html> 
    <head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 

</head> 
<body> 

<form id="myForm" action="process.php" method="POST"> 
    Name:<br> 
    <input type="text" name="name"> 
    <br><br/> 

    Message:<br> 
    <input type="text" name="comments"> 
    <br><br> 

    <input type="submit" value="Submit"> 
</form> 
    <script> 
    $('#myForm').on('submit', function(e) { 
     e.preventDefault(); 
     var details = $('#myForm').serialize(); 
     $.post('process.php', details, function(data) { 
      $('index').html(data); 
     }); 
    }); 
    </script> 


</body> 
</html> 
0

嘗試增加method="post"你的表單元素。

<form name="helpForm" novalidate role="form"> 

<form name="helpForm" novalidate role="form" method="post"> 

HTML表單默認爲GET方法。您正試圖在PHP腳本中讀取POST變量。

$formdata = array(
     'name'=> $_POST['name'], 
     'comments'=> $_POST['comments'], 
    ); 
+0

我補充說,我的形式,但我仍然收到錯誤undifined angular.js:10071,和PHP是空數據仍然書面方式向我的JSON文件。 – kyofanatic1

+0

您是否嘗試過'var_dump($ _POST);'查看正在發送的內容? –

+0

我會把它放在哪裏,如何使用它? – kyofanatic1