Angular2:发出请求时如何从客户端向服务器发送数据

2024-02-20

客户端有一个表单和一个按钮,我想将用户在表单中输入的数据发送到服务器,其中有将数据保存到数据库以及从数据库到客户端的请求处理程序。

我该怎么做我对逻辑感到困惑,我认为使用了主体解析器,还有标头的作用是什么,在这种情况下请求选项,我找到了该解决方案,但我不是盲目实施,我只是了解后想按照我的方式去做

在客户端:

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即来自客户端和服务器端的数据交换。 所以首先做同样的事情你必须添加http文件在index.html像这样的文件:

<script src="node_modules/angular2/bundles/http.dev.js"></script>

你必须添加HTTP_PROVIDERS无论是在引导程序的连接处还是在提供程序列表中。

所以现在来RequestOptions, Headers etc。首先根据需要从这里导入这些......

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

标头的作用:

基本上 header 是用来追加的Content-Type或某种机密数据,例如username,Password,我们要发送到服务器。 我们也有主体部分,它也用于向服务器发送数据。例如:

this.headers = new Headers();
    this.headers.append("Content-Type", 'application/json');
    this.headers.append("Authorization", 'confidential data or   
    something like that')

请求选项:

基本上RequestOptions是一些属性的集合,例如method(获取、发布、放置......),url or path to json file etc, Headers body part和更多。我们可以根据需要添加不同的选项。例如,这里是使用的示例RequestOptions.

this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: "url path....",
                headers: this.headers,
                body: JSON.stringify(data)
            });

这是我找到的一些最好的教程。希望这可以帮助你。

@帕迪普。

http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-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 https://angular.io/docs/js/latest/api/http/Request-class.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2:发出请求时如何从客户端向服务器发送数据 的相关文章

  • ViewChild 与 Angular 中的输入/输出相比,有什么缺点或功能差异吗?

    我正在阅读有关 Angular ViewChild 的内容并与输入 输出参数进行比较 只是好奇 Viewchild 是否有任何缺点 或者无法做一些输入 输出可以做的事情 看来 ViewChild 是首选路线 因为所有参数现在都位于 Type
  • 如何在显示 Angular 网站之前加载图像

    我一直在用 Angular 做一个网站 我需要在显示之前加载所有图像 我试图找到一种方法来制作预加载视图 直到所有图像都位于 assets文件夹已加载 但我找不到任何东西 我怎样才能在 Angular 中正确地做到这一点 我可以给你两个选项
  • 使用 DI 进行单元测试和模拟服务

    我已经为此苦苦挣扎了一段时间 希望有人能提供帮助 我有一个使用服务来获取数据的组件 我正在尝试向其添加单元测试 我的问题是测试总是失败并显示 错误 没有 Http 提供程序 这是我的代码 Service import Injectable
  • Angular 2 将参数传递给构造函数引发 DI 异常

    我想在构造函数中的组件上设置字符串属性 但是当我尝试这样的操作时 Component selector wg app templateUrl templates html wg app html export class AppCompon
  • Angular 4.x + Cordova:FileReader 无提示失败(白屏死机)

    我有一个 Angular 4 3 Cordova 应用程序 曾经运行得很好 但现在 我在应用程序启动时出现黑屏 并且什么也没有发生 经过一段时间的挖掘 我意识到它来自哪里 我的主页受保护CanActivate守卫将检查一些文件系统持久的首选
  • 使用 AngularFireObject 和 switchMap

    我真的不知道如何解决这个问题 我该如何修复这个错误 in user service ts import Injectable from angular core import AngularFireDatabase AngularFireL
  • Angular 4 Subscribe方法多次调用

    我正在创建一个全局模态组件 我的问题是 当我调用 subscribe 方法时 它会根据调用的模态数量多次调用 如何防止对可观察订阅方法的多次调用 请检查下面我的代码 提前致谢 模态 model ts export class Modal t
  • Angular4 - 如何确保 ngOnDestroy 在离开之前完成

    我有一个对象列表 用户可以单击其中一个 然后加载一个子组件来编辑该组件 我遇到的问题是 当用户返回列表组件时 子组件必须在 ngOnDestroy 方法中进行一些清理 这需要调用服务器来对对象进行最终的 修补 有时此处理可能会有点慢 当然
  • 使用反应式表单时将模板引用变量绑定到 ngModel

    我正在使用反应式表单 当输入状态无效时 我会显示错误 这是我的观点 div class form group div
  • ngTemplateOutlet - Angular 5 嵌套模板驱动表单

    我有一个从我的组件之一传递的 ng template 并且我有一个占位符来接受传递的 ng template 到我的组件上 如下 ngTemplateOutlet 中所示 div div
  • 如何检测角度7中的url变化包括参数和查询参数

    我需要检测一个组件中路径参数和查询参数的 url 更改 path category key component CollectionPageComponent 最后的网址将是例如类别 T恤 or 类别 T 恤 页 2我需要根据类别获取所有产
  • Angular 2 CLI - 部署

    我使用 Angular 2 CLI 构建了 Angular 2 应用程序 我现在的问题是我想将应用程序部署到本地服务器作为暂存环境以供其他人查看 大多数使用 Angular 2 CLI 的教程都展示了dist该文件夹似乎是在首次使用 CLI
  • Angular 2 从 Observable 获取项目的方法

    给定 Angular 2 服务中的以下 Typescript getLanguages return this http get this languagesUrl map res gt
  • 如何让 Angular2 在渲染组件之前等待承诺

    第一 是的 我事先用谷歌搜索过这个 并且solution https stackoverflow com questions 34731869 wait for angular 2 to load resolve model before
  • 角度2 $routeChangeStart , $routeChangeSuccess ,$routeChangeError

    在 Angular2 中 这些 Angular1 事件的等价物是什么 routeChangeStart routeChangeSuccess routeChangeError 我想在根应用程序组件中使用这些事件来处理任何路线更改 提前致谢
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • 使用 Angular 2 中的 TypeScript 关闭引导程序模式

    我有一个按钮 单击该按钮我将打开一个引导模式弹出窗口 模式弹出窗口包含一些带有提交按钮的字段 我只想在保存数据后关闭弹出窗口 我无法使用数据关闭 因为它会在用户点击按钮后立即关闭弹出窗口 有没有办法通过typescript关闭弹出窗口 费用
  • 将 formControlName 与 之类的内容一起使用

    我有一个动态表单 显示我通过 REST 获得的多个数据集 用户将编辑此数据集 然后只需提交它即可将其发送回服务器 该表单是动态构建的FormBuilder array 并循环通过formArrayName ngFor在我的模板中 每个数据集
  • 使用 Google Analytics 的 Angular 4+

    我正在尝试将 Google Analytics 与 Angular 4 一起使用 但我在 ts 中找不到 ga js 的任何 type 为了快速解决方案 我在每个组件中都使用了它 declare let ga any 下面我是如何解决的 创
  • Angular Material 10 范围 datepicker 和 moment.js 错误:date.getFullYear 不是函数

    尝试使用 moment js 的 rangePicker 选项来实现 Angular Material v10 datepicker 但是当我将 moment 与 rangePicker 结合使用时 它给了我这个错误 Error date

随机推荐

  • 在asp.net中设置图像过期日期

    当我获得主机时 在 Visual Studio 和 IIS7 中使用 asp net 我有一个充满图标的文件夹 这些图标很少改变并且在每个页面上都使用 有没有一种方法可以将某个目录设置为每 2 个小时左右过期一次 这样我就可以减少对服务器的
  • 在 php 中使用数组查找百分位

    我有一个像这样的数组 array 45 gt 5 42 gt 4 9 48 gt 5 41 gt 4 8 40 gt 4 9 34 gt 4 9 这里的索引是userid而价值就是他的分数 现在我想要的是为用户实现百分位 例如 45 48
  • winapi:创建进程但隐藏进程的窗口?

    我正在使用 CreateProcess 创建一个 cmd exe 进程 该进程传递一个执行并退出的参数 这使得命令提示符在屏幕上闪烁 我试图通过将 STARTUPINFO struct wShowWindow 设置为 SW HIDE 来避免
  • C# 将变量复制到缓冲区而不产生垃圾?

    在 C Net 3 5 及更高版本 中是否可以将变量复制到 byte 缓冲区中 而不会在进程中创建任何垃圾 例如 int variableToCopy 9861 byte buffer new byte 1024 byte bytes Bi
  • 如何使用SharpDX绘制透明表面?

    这个问题是基于进一步调查this https stackoverflow com questions 28960993 hud basics using sharpdx how to draw over the screen surface
  • MICO Corba 的直接替代品?

    我们目前正在使用 MICO 建立服务器和客户端之间的通信 其中客户端是用 C 编写的模拟器 服务器是显示模拟中发生的动画的 java 程序 看来 MICO 的开发已经放缓到几乎停止的状态 并且只允许我们破解它们的错误 因为我们没有时间首先弄
  • Python(2.x)列表/子列表选择-1怪异

    所以我一直在玩Python并注意到一些看起来有点奇怪的事情 的语义 1从列表中选择似乎不一致 所以我有一个数字列表 ls range 1000 当然 列表的最后一个元素ls 1 但如果我获取其中的子列表 以便获得从中点到结尾的所有内容 我会
  • 如何防止在 kivy 应用程序中关闭 x 上的窗口

    有没有办法通过单击右上角的 x 直到满足特定条件来防止关闭kivy窗口 您可以通过绑定窗口来做到这一点on request close有一个函数来检查是否满足条件 from kivy app import App from kivy cor
  • RabbitMQ 中的并发

    经过一周的编码和搜索论坛后 似乎是时候问 我有一个 C 应用程序 它使用 EventingBasicConsumer 处理 RabbitMQ 发送的消息 我想同时处理多个消息 因此我在同一连接上实例化了几个通道 本例中为 8 个 每个通道都
  • 如何使用 jquery/ajax 将数据发送到 json 文件

    我发现了无数关于如何使用 jQuery 和 ajax 从 json 文件检索数据的教程 但没有关于如何将数据 POST 到 json 文件 如果有人可以向我展示或向我发送一个关于如何执行此操作的小脚本 那就太好了 我到处搜索如何做到这一点
  • ClassNotFoundException:如何查找Java中的依赖冲突

    在使用 Atmosphere servlet 的测试 WebSocket 应用程序中 我收到以下异常 SEVERE Servlet service for servlet AtmosphereServlet threw exception
  • SQL Server + 动态查询“无效的列名”

    我正在尝试执行以下动态查询 但出现错误 无效的列名 cat DECLARE SQLDelQuery AS NVARCHAR 1200 DECLARE MemberNames varchar 50 SET MemberNames cat SE
  • subprocess.check_output() 似乎不存在(Python 2.6.5)

    我一直在阅读有关 subprocess 模块的 Python 文档 请参阅here http docs python org library subprocess html subprocess replacements 它谈论了一个sub
  • “用瓷砖填充图案”难题

    我在为基于图块的游戏编写随机关卡生成器时遇到了一个有趣的问题 我已经为其实现了一个强力求解器 但它的速度呈指数级缓慢 并且绝对不适合我的用例 我不一定要寻找完美的解决方案 我会对性能良好的 足够好 的解决方案感到满意 问题陈述 假设您拥有以
  • SIFT 描述符的计算复杂度?

    The SIFT描述符 http www aishack in tutorials sift scale invariant feature transform introduction 是 David Lowe 提出的局部描述符 该描述符
  • AFNetworking 2.0 请求自定义标头

    我试图避免在这里问这样的新问题 但我是一名正在学习 IOS 的 Android 开发人员 我一生都无法弄清楚如何使用 AFNetworking 2 0 在我的帖子请求中添加一个简单的标头 下面是到目前为止我的代码 如果我想发出不需要标头的请
  • 在 Firebase Flutter 上更新数组内的项目

    我制作了一个聊天应用程序 我希望用户能够将聊天室标记为收藏夹或将聊天室静音 我的数据库的结构如下图所示 我想要的是当用户尝试将聊天室静音或将其标记为收藏夹时 我只更新与 chatroomId 匹配的项目 但经过大量搜索后 我发现 Fireb
  • IllegalArgumentException:无法从当前目标找到导航操作/目标包名称/action_xxx

    当我尝试在视图页面中从一个片段导航到另一个片段时 我遇到了 Android 导航架构组件的问题 出现以下错误 java lang IllegalArgumentException Navigation action destination
  • 超时过期,优化查询

    我有这个查询来获取两个日期之间账单的所有详细信息 SELECT DT FROM DetailTable DT BillTable BT PackageTable PT WHERE PT Id BT IdPackage AND DT IdBi
  • Angular2:发出请求时如何从客户端向服务器发送数据

    客户端有一个表单和一个按钮 我想将用户在表单中输入的数据发送到服务器 其中有将数据保存到数据库以及从数据库到客户端的请求处理程序 我该怎么做我对逻辑感到困惑 我认为使用了主体解析器 还有标头的作用是什么 在这种情况下请求选项 我找到了该解决