javascript — отправка данных поля ввода в php скрипт в angular 4

Я пытаюсь создать угловое приложение, и я довольно плохо знаком с этой технологией. Я успешно смог получить значения из поля ввода и просмотреть их в консоли, но я хочу взять эти значения и отправить их в сценарий 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)
});
}

}

заранее спасибо!!!

1

Решение

Я полагаю, что ваша проблема может быть связана с CORS: вы, вероятно, запускаете свое угловое приложение с конфигурацией по умолчанию, что означает, что оно будет размещено на localhost:4200в то время как ваш http пост-запрос отправляется на localhost:80, который не имеет того же происхождения, что и ваше приложение.

Вот хорошая статья о CORS:
Статья о совместном использовании ресурсов

А также Вот хороший ответ, объясняющий, как с ними бороться.

0

Другие решения

Других решений пока нет …