2017-04-13 32 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