php - 如何解码返回到 Angular 按钮单击的 json 数组

Question

我正在尝试获取从 mysql 查询返回到 Angular 调用的键值对。单击后，我得到了我想要的三行(见下面的结果)。

HTML:

<div ng-app="myapp" ng-controller="empcontroller">
<form>
Fistname    <input type="text" ng-model="emp_no" /><br/>
Secondname  <input type="text" ng-model="first_name" /><br/>
Thirdname   <input type="text" ng-model="last_name" /><br/>

<button ng-click="postData()">Submit</button><br>
</form>
</div>



<script>
var app = angular.module('myapp', []);
app.controller('empcontroller', function($scope, $http)
               {

               $scope.postData = function () {

               var Indata = { what_to_do: "angular_users5",  where_clause: '[{"sqlvalue1":"a_earchvalue1","sqlvalue2":"b_earchvalue2"}]' }

               var req =
               {
                    method: 'POST',url: 'angular_master.php',
                    headers: {'Content-Type': undefined},
                    params: Indata
               }

               $http(req).then(function (response)
               {
                        $scope.names = response.data.records;
                               alert("i am here");

                        .. at this point I need the key value pair or each rows from the results below

                });

               }


               });

</script>

php查询返回的数据为:

{
    "records":[
        {
            "Name":"Joe",
            "City":"Doe",
            "Country":"w"
        },
        {
            "Name":"Joe1",
            "City":"Doe1",
            "Country":"w1"
        },
        {
            "Name":"Joe2",
            "City":"Doe2",
            "Country":"w2"
        }
    ]
}

由于我返回了 3 行，所以我喜欢将名称分配给表单中的名字、第二名、第三名字段。

谢谢

Answer 1

对我来说一切看起来都很好(除了你奇怪的命名约定)。您现在可以在 View 中使用数据。

<form>
    <div ng-repeat="n in names tracked by $index">
        <h3>{{$index + 1}}. Name:</h3>
        Firstname: <input ng-model="n.Name" /><br />
        Secondname: <input ng-model="n.City" /><br />
        Lastname: <input ng-model="n.Country" /><br />
        <button type="button" ng-click="submitOne(n)">Save this</button>
    </div>
    <button type="button" ng-click="submitAll(names)">Save all</button>
</form>

Angular 会自动将服务器响应中的 Json 字符串解码为 Json 对象。 只需注意您的服务器发送 JSON header ，以便 Angular 理解该格式。

// add this to your server script (example: php), before you output the data
header('Content-Type: application/json; charset=utf-8');

顺便说一句。您不应该使用 Content-Type: undefined。 使用:

Content-Type: 'application/x-www-form-urlencoded; charset=utf-8'

此外，您正在执行 POST 请求 - 这很好，但您使用“params”将数据添加到您的请求中。您应该使用“data”键，因为“params”将添加 GET 参数。

https://docs.angularjs.org/api/ng/service/$http#usage

params – {Object.} – Map of strings or objects which will be serialized with the paramSerializer and appended as GET parameters.

data – {string|Object} – Data to be sent as the request message data.