Angular AJAX 发布问题

Posted

技术标签:

【中文标题】Angular AJAX 发布问题【英文标题】:Angular AJAX post Issue 【发布时间】:2015-11-11 13:41:24 【问题描述】:

我正在开发一个 ionic 应用程序,该应用程序需要将用户提交的信息发布到数据库。我正在与为此表单提交创建单独的 php 脚本的人合作,但是每次我尝试从应用程序发布时,我要么在不使用代理时遇到 cors 问题,要么在使用 json afeld 时遇到 404 错误......

PHP 看起来像这样:

<?php

$data = json_decode(file_get_contents("php://input"));
$celeb = $data->celeb;
$camp = $data->camp;
$spirit = $data->spirit;

$sport = $data->sport;
$bizs = $data->bizs;
$entrep = $data->entrep;

$young = $data->young;
$conser = $data->conser;
$saty = $data->saty;

$name = $data->name;
$surname = $data->surname;
$email = $data->email;

$contacts = $data->contacts;

$con = mysql_connect('localhost', 'yarp', 'arpi');
mysql_select_db('yeah', $con);

$qry_em = 'select count(*) as cnt from users where email ="' . $email . '"';
$qry_res = mysql_query($qry_em);
$res = mysql_fetch_assoc($qry_res);

if ($res['cnt'] == 0) 
    $qry = 'INSERT INTO test (celeb,camp,spirit,sport,bizs,entrep,young,conser,saty,name,surname,email,contacts) values ("' . $celeb . '","' . $camp . '",' .$spirit . ','.$sport. ','.$bizs. ','.$entrep. ','.$young. ','.$conser. ','.$saty. ','.$name. ','.$surname. ','.$email. ','.$contacts. ')';
    $qry_res = mysql_query($qry);
    if ($qry_res) 
        $arr = array('msg' => "Submitted Successfully!!!", 'error' => '');
        $jsn = json_encode($arr);
        print_r($jsn);
     else 
        $arr = array('msg' => "", 'error' => 'Error In Submit');
        $jsn = json_encode($arr);
        print_r($jsn);
    
 else 
    $arr = array('msg' => "", 'error' => 'A submit has already been cast using this email');
    $jsn = json_encode($arr);
    print_r($jsn);



?>

我的控制器如下所示:

.controller('FrmController', function ($scope , $http) 
                $scope.errors = [];
                $scope.msgs = [];

                $scope.vote = function() 

                    $scope.errors.splice(0, $scope.errors.length);
                    $scope.msgs.splice(0, $scope.msgs.length);

                    $http.post('https://jsonp.afeld.me/?url=http://www.examplesite.com/submit.php', 

                        'celeb'     : $scope.celeb, 
                        'camp'      : $scope.camp, 
                        'spirit'    : $scope.spirit,
                        'sport'     : $scope.sport,
                        'bizs'      : $scope.bizs, 
                        'entrep'    : $scope.entrep, 
                        'young'     : $scope.young,
                        'conser'    : $scope.conser,
                        'saty'      : $scope.saty, 
                        'name'      : $scope.name, 
                        'surname'   : $scope.surname,
                        'email'     : $scope.email,
                        'contacts'  : $scope.contacts

                    
                    ).success(function(data, status, headers, config) 
                        if (data.msg != '')
                        

                          console.log(data.msg);
                            $scope.msgs.push(data.msg);
                        
                        else
                        
                          console.log(data.error);
                            $scope.errors.push(data.error);
                        
                    ).error(function(data, status)  
                        $scope.errors.push(status);
                    );
                

        )

submit.php 文件肯定在地址,所以我不太确定我哪里出错了......

【问题讨论】:

【参考方案1】:

正如 Jess Paton 所说,您应该使用它。然而,一个更好的例子(来自我的博客文章,链接如下)是:

<?php
 //http://***.com/questions/18382740/cors-not-working-php
 if (isset($_SERVER['HTTP_ORIGIN'])) 
        header("Access-Control-Allow-Origin: $_SERVER['HTTP_ORIGIN']");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') 

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers:        $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']");

        exit(0);
    


    //http://***.com/questions/15485354/angular-http-post-to-php-and-undefined
    $postdata = file_get_contents("php://input");
 if (isset($postdata)) 
 $request = json_decode($postdata);
 $username = $request->username;

 if ($username != "") 
 echo "Server returns: " . $username;
 
 else 
 echo "Empty username parameter!";
 
 
 else 
 echo "Not called properly with username parameter!";
 
?>

如需更多信息,如果您有兴趣,我编写了关于如何将数据从 Ionic 应用程序发布到 PHP 服务器的分步教程,以及Github example,您可以在此处查看:http://www.nikola-breznjak.com/blog/codeproject/posting-data-from-ionic-app-to-php-server/。

【讨论】:

非常感谢您的评论和链接。我现在似乎正在处理 PHP 代码,但我收到一个错误,我假设数据库端的某些东西正在阻止代码通过,否则我的控制器不正确 当然,没问题。如果答案被证明是有帮助的,请考虑将其标记为这样。至于您的错误,始终值得检查服务器日志中是否存在任何 PHP 错误。至于客户端,如果您使用的是 Chrome,您可以随时查看开发工具(或类似工具)。 感谢您的回答!【参考方案2】:

所以我对php不太了解,但我很确定你需要在你的php文件中启用cors:

<?php
 header("Access-Control-Allow-Origin: *");

注意:与 PHP 标头函数的所有用途一样,这必须在从服务器发送任何输出之前。

【讨论】:

以上是关于Angular AJAX 发布问题的主要内容,如果未能解决你的问题,请参考以下文章

Angular资源如何保留ajax标头并同时启用cors

无法使用 Angular 7 中的 FormData 发送带有 Ajax 的文件

使用 Jquery Ajax 后,Angular 函数突然不起作用

从 jquery $.ajax 到 angular $http

Angular Onsen UI Ajax call

Angular 在 jQuery Ajax 加载页面中不起作用