以角度4将输入字段数据发送到php脚本答案

【问题标题】：sending input field data to php script in angular 4以角度4将输入字段数据发送到php脚本
【发布时间】：2019-04-03 20:41:00
【问题描述】：

我正在尝试构建一个 Angular 应用程序，并且我对这项技术相当陌生。我已经成功地能够从输入字段中获取值并在控制台中查看它们，但我想获取这些值并将其发送到可以完成后端处理的 php 脚本。基本上它是一个简单的邮件功能。以下是我的代码。

我的 backend.php 文件

<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

  @$rand = $_POST['rand'];
    @$captcha = $_POST['captcha'];
    @$email = $_POST['email'];
    @$msg = $_POST['msg'];
    @$to = "contact@ixoraa.in";
  @$subject = $_POST['name'];   
    @$headers = "From:" . $email . "\r\n";
  @$header .= "MIME-Version: 1.0\r\n";
    @$header .= "Content-type: text/html\r\n";
if($rand == $captcha)
{

    $retval =mail($to, $subject, $msg, $headers);



if( $retval == true )  

{

echo '<script type="text/javascript">'; 

echo 'alert("Thanks for your feedback. We will reply back soon.")'; 
echo '</script>';

echo '<meta http-equiv="refresh" 
content="0;url=http://www.ixoraa.in/new">';

}

else
{

echo '<script type="text/javascript">'; 

echo 'alert("Not sent !!!")'; 

   echo '</script>';
}
   }

        else{

echo '<script type="text/javascript">'; 

echo 'alert("Captcha does not match")'; 

   echo '</script>';
        }


?>

这是我的component.html

<form class="" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
            <div class="form-group has-feedback">
                <input  name="name" type="text" formControlName='name' class="form-control" placeholder="Name" style="background-color: rgba(60, 144, 155, 0.10); color: white;"/>
                <i class="glyphicon glyphicon-user form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
                <input  name="email" formControlName='email' type="text" class="form-control" placeholder="Email" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
                <i class="glyphicon glyphicon-send form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
               <textarea  name="msg" formControlName='msg' type="text" rows="5" class="form-control" placeholder="Message" style="background-color: rgba(60, 144, 155, 0.10); color: white;"></textarea>
                <i class="glyphicon glyphicon-comment form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
   <div style=" display: table; width: 100%; font-weight:600; font-size:25px;">
   <input name="rand" formControlName='rand'  class="text-center" style="background-color: antiquewhite; text-decoration: line-through;" size="3" type="text" value="{{randomNumber}}" readonly></div>
   <div class="form-group has-feedback">
        <input formControlName='captcha'  onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off name="captcha" id="captcha" type="text" class="form-control" placeholder="Enter Code Here" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
        <i class="glyphicon glyphicon-pencil form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
   </div>
   <input style="padding-left: 20px; font-weight: 600; padding-right: 20px; background-color: #00aee7;margin-bottom: 40px; color: white;" type="submit" name="submit" value="Send" class="btn">
</form>

这是我的 component.ts 文件

import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
import {FormGroup, FormControl, FormControlName} from '@angular/forms';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  form;

  randomNumber;
  constructor(private http: Http) {
    this.randomNumber = Math.floor((Math.random() * 10000) + 1);

  }

  onSubmit = function(user) {
      console.log(user);
      this.http.post('http://localhost/ixoraa/backend.php', user).subscribe();

  };

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(),
      email: new FormControl(),
      msg: new FormControl(),
      captcha: new FormControl(),
      rand: new FormControl(this.randomNumber)
    });
  }

}

提前谢谢！！！

【问题讨论】：

我认为您的 Angular 代码没有任何问题。您是否看到带有正文的 Network 的 XHR 选项卡中正在进行的 POST 请求？如果是，那么问题似乎出在您的 PHP 脚本上。
为什么变量名前有@？例如@$rand = $_POST['rand'];一定是这样 $rand = @$_POST['rand'];
我对@符号了解不多。正如我所说，我知道有棱角，我查阅了一些教程，他们有，所以我把它放了。

标签： javascript php jquery angular angular7

【解决方案1】：

我相信您的问题可能是 CORS 问题：您可能正在使用默认配置启动 Angular 应用程序，这意味着它将托管在 localhost:4200 上，而您的 http post 请求将在 localhost:80 上发送，这不是与您的申请相同。

这是一篇关于 CORS 的好文章： Cross-Origin Resource Sharing Article

here 是一个很好的答案，解释了如何处理它们。

【讨论】：