AngularJS将表单数组传递给php

时间：2015-03-18 12:35:21

标签： php ajax angularjs

我正在努力让这种形式发挥作用，想知道是否有人能给我任何想法为什么！所以我所拥有的是一个带有ng-app = especial的索引页面。在DIV main_area_holder中进行ng_view。 Ng-view在索引页面上显示精细和表单显示（来自localtion app / partials / cust_form.php）。我正在努力工作的是对php文件的http请求，所以我可以将表单数据导入到DB中。我知道PHP代码没有ajax（直接发布请求）。如果你能帮忙，我会非常感激。

app.js更新 

var especial = angular.module('especial', ['ngRoute']);

especial.config(function($routeProvider) {
$routeProvider.when('/',
    {
        controller: 'custPage',
        templateUrl: 'app/partials/cust_form.tpl.html'
    });
});

especial.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(request){
    if(typeof(request)!='object'){
        return request;
    }
    var str = [];
    for(var k in request){
        if(k.charAt(0)=='$'){
            delete request[k];
            continue;
        }
        var v='object'==typeof(request[k])?JSON.stringify(request[k]):request[k];
        str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
    return str.join("&");
};
$httpProvider.defaults.timeout=10000;
$httpProvider.defaults.headers.post = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
};
});
especial.controller('custPage', function($scope, $http){
    $scope = {};
    $scope.custCreUpd = function(){
        $http({
            method: 'POST',
            url: 'app/php/cust_cre_upd.php',
            data: $scope.cust,
            headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(data){

            console.log("OK", data)

        }).error(function(err){"ERR", console.log(err)})
    };
});

cust_cre_upd.php 

<?php

        $post = file_get_contents("php://input");
        $values = json_decode($post, true);
        $table='customers';
        $conn = new PDO('mysql:host=localhost;dbname=displaytrends;charset=utf8', 'displaytrends', 'displaytrends');
        $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
                    //Strip array to fields with values     
        $values=array_filter($values);
                    //Take array keys from array
        $field_keys=array_keys($values);
                    //Implode for insert fields
        $ins_fields=implode(",", $field_keys);
                    //Implode for insert value fields (values will binded later)
        $value_fields=":" . implode(", :", $field_keys);
                    //Create update fields for each array create value = 'value = :value'.
        $update_fields=array_keys($values);
        foreach($update_fields as &$val){
            $val=$val." = :".$val;
        }
        $update_fields=implode(", ", $update_fields);
                    //SQL Query
        $insert = "INSERT INTO $table ($ins_fields) VALUES ($value_fields) ON DUPLICATE KEY UPDATE $update_fields";
        $query = $conn->prepare($insert);
                    //Bind each value based on value coming in.
        foreach ($values as $key => &$value) {
            switch(gettype($value)) {
                case 'integer':
                case 'double':
                $query->bindParam(':' . $key, $value, PDO::PARAM_INT);
                break;
                default:
                $query->bindParam(':' . $key, $value, PDO::PARAM_STR);
            }
        }
        $query->execute();

    ?>

的index.php 

<!doctype html>
<html ng-app="especial">
<head>
<meta charset="UTF-8">
<title>Especial - Database</title>
<link rel="stylesheet" href="css/index.css">
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
</head>

<body>
<div class="header">
<img id="logo" src="images/especial-logo.jpg">
<a id="logout" href="logout.php">Logout</a>
<div class="menu"></div>
</div>
<div class="sub_menu"></div>

<div class="main_area">
    <div id="main_area_holder" ng-view>
    </div>
</div>
<div class="footer"></div>
<script src="app/app.js"></script>
</body>
</html>

cust_form.php 

<div ng-controller="custPage">
<div id="form">
        <form name="cust_form">   
           <label>Account No:</label>
           <input type="text" ng-model="cust.int_custID" name="cust[int_custID]" id="int_custID"/>
           <label>Company:</label>
           <input type="text" ng-model="cust.cust_company" name="cust[cust_company]" id="cust_company"/>
            <label>Address:</label>
            <textarea type="text" rows=5 ng-model="cust.cust_address" name="cust[cust_address]" id="cust_address"></textarea>
            <label>Postcode:</label>
            <input type="text" ng-model="cust.cust_postcode" name="cust[cust_postcode]" id="cust_postcode"/>
            <label>Contact 1:</label>
            <input type="text" ng-model="cust.cust_contact_1" name="cust[cust_contact_1]" id="cust_contact_1"/>
            <label>Contact 2:</label>
            <input type="text" ng-model="cust.cust_contact_2"  name="cust[cust_contact_2]"  id="cust_contact_2"/>
            <label>Telephone:</label>
            <input type="text" ng-model="cust.cust_tel" name="cust[cust_tel]" id="cust_tel"/>
            <label>Mobile:</label>
            <input type="text" ng-model="cust.cust_mob" name="cust[cust_mob]" id="cust_mob"/>
            <label>DDI:</label>
            <input type="text" ng-model="cust.cust_DDI" name="cust[cust_DDI]" id="cust_DDI"/>
            <label>Email:</label>
            <input type="email" ng-model="cust.cust_email" name="cust[cust_email]" id="cust_email"/>
            <label>Notes:</label>
            <textarea type="text" rows=5 colums=1 ng-model="cust.cust_notes"  name="cust[cust_notes]" id="cust_notes"></textarea>

           <button type="submit" ng-click="custCreUpd()"> Submit </button>
       </form>
</div>
</div>

3 个答案:

答案 0 :(得分：1)

app.js：

var especial = angular.module('especial', ['ngRoute']);

especial.config(function($routeProvider) {
    $routeProvider.when('/',
    {
        controller: 'custPage',
        templateUrl: 'app/partials/cust_form.tpl.html'
    });
});

especial.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(request){
    if(typeof(request)!='object'){
        return request;
    }
    var str = [];
    for(var k in request){
        if(k.charAt(0)=='$'){
            delete request[k];
            continue;
        }
        var v='object'==typeof(request[k])?JSON.stringify(request[k]):request[k];
        str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
    return str.join("&");
};
$httpProvider.defaults.timeout=10000;
$httpProvider.defaults.headers.post = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
};
});
especial.controller('custPage', function($scope, $http){
   $scope.cust = {};
   $scope.custCreUpd = function(){
    $http({
        method: 'POST',
        url: 'app/php/cust_cre_upd.php',
        data: $scope.cust,
        headers : {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        console.log(data)
    }).error(function(err){
        console.log(err)
    })
};
});

cust_cre_upd.php 

<?php
//print_r($_POST); you can print_r it for understanding
//use $_POST as usual, example $_POST["cust_ID"] means your     
$values = $_POST;
$conn = new PDO('mysql:host=localhost;dbname=displaytrends;charset=utf8', 'displaytrends', 'displaytrends');
$conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
//Strip array to fields with values
$values=array_filter($values);
//Take array keys from array
$field_keys=array_keys($values);
//Implode for insert fields
$ins_fields=implode(",", $field_keys);
//Implode for insert value fields (values will binded later)
$value_fields=":" . implode(", :", $field_keys);
//Create update fields for each array create value = 'value = :value'.
$update_fields=array_keys($values);
foreach($update_fields as &$val){
    $val=$val." = :".$val;
}
$update_fields=implode(", ", $update_fields);
//SQL Query
$insert = "INSERT INTO $table ($ins_fields) VALUES ($value_fields) ON DUPLICATE KEY UPDATE $update_fields";
$query = $conn->prepare($insert);
//Bind each value based on value coming in.
foreach ($values as $key => &$value) {
    switch(gettype($value)) {
        case 'integer':
        case 'double':
            $query->bindParam(':' . $key, $value, PDO::PARAM_INT);
            break;
        default:
            $query->bindParam(':' . $key, $value, PDO::PARAM_STR);
    }
}
$query->execute();

的index.php：

<!doctype html>
<html ng-app="especial">
<head>
    <meta charset="UTF-8">
    <title>Especial - Database</title>
<!--    <link rel="stylesheet" href="css/index.css">-->
    <script src="scripts/angular-1.3.8.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
<!--    <script src="scripts/angular-animate.js"></script>-->
</head>

<body>
<div class="header">
    <img id="logo" src="images/especial-logo.jpg">
    <a id="logout" href="logout.php">Logout</a>
    <div class="menu"></div>
</div>
<div class="sub_menu"></div>

<div class="main_area">
    <div id="main_area_holder" ng-view>
    </div>
</div>
<div class="footer"></div>
<script src="app/app.js"></script>
</body>
</html>

cust_form.php（cust_form.tpl.html）：

<div id="form">
    <form name="cust_form">
        <label>Account No:</label>
        <input type="text" ng-model="cust.int_custID" id="int_custID"/>
        <label>Company:</label>
        <input type="text" ng-model="cust.cust_company"  id="cust_company"/>
        <label>Address:</label>
        <textarea type="text" rows=5 ng-model="cust.cust_address" id="cust_address"></textarea>
        <label>Postcode:</label>
        <input type="text" ng-model="cust.cust_postcode" id="cust_postcode"/>
        <label>Contact 1:</label>
        <input type="text" ng-model="cust.cust_contact_1"  id="cust_contact_1"/>
        <label>Contact 2:</label>
        <input type="text" ng-model="cust.cust_contact_2"  id="cust_contact_2"/>
        <label>Telephone:</label>
        <input type="text" ng-model="cust.cust_tel" id="cust_tel"/>
        <label>Mobile:</label>
        <input type="text" ng-model="cust.cust_mob" id="cust_mob"/>
        <label>DDI:</label>
        <input type="text" ng-model="cust.cust_DDI" id="cust_DDI"/>
        <label>Email:</label>
        <input type="email" ng-model="cust.cust_email" id="cust_email"/>
        <label>Notes:</label>
        <textarea type="text" rows=5 colums=1 ng-model="cust.cust_notes" id="cust_notes"></textarea>

        <button type="submit" ng-click="custCreUpd()"> Submit </button>
    </form>
</div>

我在这里创建了一个存储库https://github.com/Danzeer/forJoshCrocker

要在网络浏览器中使用脚本进行调试，您可以使用chrome的开发人员工具 - 网络（OSX中的选项+命令+ i，窗口中的F12，并选择网卡）。单击时提交，您可以在网卡中查看请求，并通过单击请求来检查http标头。

enter image description here enter image description here

答案 1 :(得分：0)

我认为你可以找到＆＃34; post＆＃34;这里AngularJs $http.post() does not send data

angualr的效果很好，但有角度的帖子并没有将表格数据作为jquery来表示。 我的解决方案（可能是错的，根据我搜索的内容）是重写角度的httpProvider：

app.config(function($httpProvider) {
    $httpProvider.defaults.transformRequest = function(request){
        if(typeof(request)!='object'){
                return request;
        }
        var str = [];
        for(var k in request){
                if(k.charAt(0)=='$'){
                        delete request[k];
                        continue;
                }
                var v='object'==typeof(request[k])?JSON.stringify(request[k]):request[k];
                str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
        return str.join("&");
   };
   $httpProvider.defaults.timeout=10000;
   $httpProvider.defaults.headers.post = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
   };
  });

2你的

ng-click="custCreUpd"

应该是

ng-click="custCreUpd()"

3检查下面的结果，我不熟悉

$。PARAM（$ scope.cust）

答案 2 :(得分：0)

我已经重写了你的代码，好像在发帖子。你可以将它与你的比较：

app.js：

var especial = angular.module('especial', ['ngRoute']);

especial.config(function($routeProvider) {
$routeProvider.when('/',
    {
        controller: 'custPage',
        templateUrl: 'app/partials/cust_form.tpl.html'
    });
});

especial.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(request){
    if(typeof(request)!='object'){
        return request;
    }
    var str = [];
    for(var k in request){
        if(k.charAt(0)=='$'){
            delete request[k];
            continue;
        }
        var v='object'==typeof(request[k])?JSON.stringify(request[k]):request[k];
        str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
    return str.join("&");
};
$httpProvider.defaults.timeout=10000;
$httpProvider.defaults.headers.post = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
};
});
//when using 1.3.8 version , consider how to write controller with []
especial.controller('custPage', ['$scope', '$http', function($scope, $http){
    $scope.cust = {};
    //$scope = {}; !!!!
    $scope.custCreUpd = function(){ // pay attention of params
        $http({
            method: 'POST',
            url: "app/php/cust_cre_upd.php",
            data: $scope.cust,
            headers : {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).success(function(data){

            console.log("OK", data)

        }).error(function(err){"ERR", console.log(err)})
    };
}]);

的index.php：

!doctype html>
<html ng-app="especial">
<head>
<meta charset="UTF-8">
<title>Especial - Database</title>
<script src="js/angular-1.3.8.min.js"></script>
<script src="js/angular-route.min.js"></script>
<!--    <script src="scripts/angular-animate.js"></script>-->
</head>

<body>
   <div id="main_area_holder" ng-view>
    </div>
<script src="app/app.js"></script>
</body>
</html>

custForm.tpl.html（您的cust_form.php）：

<!--<div ng-controller="custPage"> !none ng-controller when using ng-route-->

<div id="form">
   <form name="cust_form">
       <label>Account No:</label>
       <input type="text" ng-model="cust.int_custID" name="cust[int_custID]" id="int_custID"/>
       <button type="submit" ng-click="custCreUpd()"> Submit </button>
    </form>
</div>

命名custForm.tpl.html而不是cust_form.php似乎很有意义）.php的请求将通过apache / nginx传递给php执行者，而仅通过apache / nginx请求html。使用ng-route时要注意角度缓存问题。 - 一些不关联https://github.com/karlgoldstein/grunt-html2js和https://github.com/angular-ui/bootstrap的工具，享受！

点数： 1控制器的定义

2个angularjs帖子

3如何在ng-route中使用ng-view

4 params - ＆＃34; $ scope＆＃34;函数custCreUpd隐藏$ scope服务

相关问题
最新问题