我是棱角分明的新人。我正在创建注册功能,但是当我发布请求它给了我错误:“发布有效请求”。你能检查一下我的代码并告诉我我做错了什么。
服务
import { Injectable, OnInit } from '@angular/core'; import {HttpModule, Http,Response,Headers, RequestOptions,Request,RequestMethod} from '@angular/http'; import 'rxjs/add/operator/map'; import { Observable } from "rxjs/Rx"; import { User } from './user'; import { HttpClient,HttpHeaders, HttpRequest } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class RegisterService implements OnInit { posts_Url: string = 'http://localhost:8080/GradeMyDrawings/teacher/register'; constructor(private http: HttpClient) { } ngOnInit () { } registerUser(user:User) { return this.http.post(this.posts_Url, JSON.stringify(user)) .map((response: Response) => response); } }
注册组件
import {Component, OnInit,Input} from '@angular/core' import { CommonService } from '../../_common/services/common.service'; import { CommonComponent } from '../../_common/common.component'; import { User } from '../../shared/user'; import { RegisterService } from '../../shared/register.service'; import { Router, RouterModule } from '@angular/router'; import {HttpModule, Http,Response,Headers, RequestOptions} from '@angular/http'; import {HttpClient, HttpErrorResponse} from '@angular/common/http'; @Component ({ selector: 'app-login', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'], providers:[RegisterService] }) export class SignUpComponent implements OnInit { public model:any = []; constructor (private _resterservie:RegisterService, private router:Router) { } ngOnInit () { } register() { this._resterservie.registerUser(this.model) .subscribe( data => { console.log("Successful"); }, error=> { console.log("Error"); } ) } }
注册html
<div class="form-group">
<input type="text" name="tTitle" [(ngModel)]="model.tTitle" #tTitle = "ngModel" placeholder="Teacher Title" class="form-control" id="tTitle" />
</div>
<div class="form-group">
<label id="tq1"><strong>Q1:</strong>What is your Birth Date</label>
<input type="text" name="tans1" [(ngModel)]="model.tans1" #tans1 = "ngModel" placeholder="Security Q1" class="form-control" id="tans1" />
</div>
<div class="form-group">
<label id="tq2"><strong>Q2:</strong> What is your favourite Sports:</label>
<input type="text" name="tans2" [(ngModel)]="model.tans2" #tans2 = "ngModel" placeholder="Security Q2" class="form-control" id="tans2" />
</div>
<div class="form-group">
<label id="tq3"><strong>Q3:</strong> What is your favourite Color:</label>
<input type="text" name="tans3" [(ngModel)]="model.tans3" #tans3 = "ngModel" placeholder="Security Q3" class="form-control" id="tans3" />
</div>
<div class="form-group">
<select class="form-control" id="tSignUpType" name="tsignUpType" [(ngModel)]="model.tsignUpType" #tsignUpType = "ngModel">
<option>ADMIN</option>
<option>TEACHER</option>
</select>
</div>
<div class="form-group">
<input type="text" name="Email" [(ngModel)]="model.Email" #Email = "ngModel" placeholder="Email" class="form-control" id="tSignUpEmail" />
</div>
<div class="form-group" style="position:relative">
<div id="pas-mismatch" style="color: red; position: absolute; top: -18px;"></div>
<input type="password" name="password" [(ngModel)]="model.password" #password = "ngModel" placeholder="Password" class="form-control" id="tSignUpPassword" />
</div>
<div class="form-group">
<input type="password" name="password2" [(ngModel)]="model.password2" #password2 = "ngModel" placeholder="Retype password" class="form-control" id="tconfirmpassword" />
</div>
<div class="form-group">
<input type="submit" name="signup_submit" class="btn btn-primary" value="Sign up" id="SignUpbtn" />
<button class="btn btn-primary signIn">Sign In</button>
</div>
<div class="alert alert-success successful_alert" style="display:none;">
Successfully Created your Account, You can login Now!
</div>
</form>
用户界面
export interface User { 'tsignUpUserid':string; 'tsignUpDisplayName':string; 'tschoolid':string; 'tschoolName':string; 'tschoolAd1':string; 'tschoolAd2':string; 'tschoolZip':string; 'tschoolCity':string; 'tschoolState':string; 'tTitle':string; 'tq1':string; 'tq2':string; 'tq3':string; 'tans1':string; 'tans2':string; 'tans3':string; 'tsignUpType':string; 'tsignUpPassword':string; 'tSignUpEmail':string; }
您是否尝试将json发送到服务器并添加了标头内容类型?我认为错误来自服务器服务器不接受请求,但如果没有,请与我们分享捕获或有关请求或控制台错误的信息。
看起来你错过了.pipe。更新您的代码如下。
registerUser(user: User): Observable<any> {
return this.http.post(this.posts_Url, user)
.pipe(
map((response: Response) => response)
);
}
另请注意: 1.请检查您是否确实需要对用户对象进行字符串化。如果api以这种方式接受,你可以直接传递json对象。 2.您不需要在服务类中实现“OnInit”。
在服务器配置中添加Access-Control-Allow-Origin或在处理程序文件中添加以下标头。
这个例子是为php。
<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
?>
这是常见问题之一,否则您将从浏览器控制台获取错误。
请在您的邮寄请求中添加headers
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.posts_Url, JSON.stringify(user),options).map(
(response: Response) => <any>response.json()
);
你的registerUser(user: User)
方法接受User
类型的参数,但是你在singup组件中为http请求提供了一个数组。因此,您需要在注册组件中更正此问题
public model: User;
您也可以先初始化
public model: User = {};