Angular2:发出请求时如何将数据从客户端发送到服务器 [英] Angular2: How to send data from client to server when making request
问题描述
客户端上有一个表单和一个按钮，我想将用户在表单中键入的数据发送到服务器，在服务器上有将数据保存到数据库以及从数据库到客户端的请求处理程序.
There is form and a button on client side, I want to send data that user typed in the form, to the server, where there is request handler that save data to the database, and from database to the client.
我该怎么办?我对逻辑感到困惑，我认为这里使用了主体解析器，在这种情况下，标题，请求选项的作用是什么，我找到了解决方案，但我并没有盲目地实现，我只是想在理解后按自己的方式做
How can i do this I'm confused about the logic, I think there is use of body parser, also what is the role of headers, request option in that case, I found that solution but I'm not implementing blindly, I just want to do it my way after understanding
在客户端:
let headers: Headers = new Headers();
headers.append('Content-Type', 'application/json');
let opts: RequestOptions = new RequestOptions();
opts.headers = headers;
this.http.post(
'http://localhost:3000/addStudent',
JSON.stringify(obj),
opts
).subscribe((res: Response) => {
console.log(res.json())
setTimeout(() => {
this.students = res.json();
}, 3000)
})
在服务器端:
app.post('/addStudent',function(req,res) {
var newStudent = new StudentModel(req.body);
console.log(req.body);
newStudent.save();
StudentModel.find(function(err,data) {
if(err) res.send(err)
else res.json(data)
})
推荐答案
您的问题与HTTP有关，即来自客户端和服务器端的数据交换.
因此首先要做同样的事情，您需要像这样在index.html文件中添加http文件:
Well your question is related to HTTP i.e exchange of data from the client and server side both.
so doing same first you have to need to add http file in the index.html file like this:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
，您必须添加HTTP_PROVIDERS，无论是在引导程序中还是在提供商列表中.
and you have to add HTTP_PROVIDERS whether at the tie of bootstrap or in the providers list.
现在进入RequestOptions, Headers etc.首先根据需要从此处导入这些文件...
so now come to RequestOptions, Headers etc. firstly import these as required from here...
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
标题角色:
基本标头用于附加Content-Type或某些我们希望发送到服务器的机密数据，例如username,Password.
我们也有主体部分，它也用于将数据发送到服务器.例如:
Role of Header:
Basically Header is used to append Content-Type or some kind of confidential data like username,Password ,which we want to send to the server.
we have body part too which is also used to send data to server. for example:
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'confidential data or
something like that')
RequestOptions:
基本上RequestOptions是一些属性的集合，例如method(GET，POST，PUT ....)，url or path to json file etc，Headers
body part等.我们可以根据需要添加不同的optipon.例如，这里是使用RequestOptions的示例.
RequestOptions :
Bascially RequestOptions is the collection of some properts like method (GET,POST,PUT....), url or path to json file etc, Headers
body part and more. we can add different optipon as per need. for example here is the example of using RequestOptions.
this.requestoptions = new RequestOptions({
method: RequestMethod.Post,
url: "url path....",
headers: this.headers,
body: JSON.stringify(data)
});
这是我为相同的东西找到的一些最佳教程.希望对您有帮助.
here is some best tutorials i had found for the same. hope this may helps you.
@Pardeep.
http://www.syntaxsuccess.com/viewarticle/angular-2.0-和-http
https://auth0 .com/blog/2015/10/15/angular-2-series-part-3-using-http/
https://angular.io/docs/js/Latest/api/http/Request-class.html
这篇关于Angular2:发出请求时如何将数据从客户端发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
