如何使用POST请求将动态获取的输入数据发送到服务器 [英] how to send input data taken dynamically to the server using POST request

查看：37
本文介绍了如何使用POST请求将动态获取的输入数据发送到服务器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

import React, { Component } from 'react';从反应路由器"导入{链接}类模态扩展组件{构造函数(道具){超级(道具)；this.state = {inputuuid: '',输入法: '' ,inputminor: '' ,输入制造商:''};this.handleUuid = this.handleUuid.bind(this);this.handleMajor = this.handleMajor.bind(this);this.handleMinor = this.handleMinor.bind(this);this.handleManufacturer = this.handleManufacturer.bind(this);this.handleSubmit = this.handleSubmit.bind(this);警报(开始")；fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons",{方法:'发布'，标题:{'内容类型':'应用程序/json'，'授权': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'},正文:JSON.stringify({name: "信标名称 1234",描述:此处为信标的信标描述"，uuid: "this.state.inputuuid1",专业:this.state.inputmajor"，次要:this.state.inputminor"，制造商:this.state.inputmanufacturer"，信标类型:type9"，位置:主门8"，楼层:ist"，区域:58c29c06d3ec866803040e6e"})}).then(函数(响应){如果(响应.确定){控制台日志(响应)返回响应；}throw new Error('网络响应不正常.');}).then(函数(数据){控制台日志(数据)；}).catch(函数(错误){console.log('你的提取操作出现问题:' + error);});}句柄Uuid(事件){this.setState({inputuuid: event.target.value});}处理主要(事件){this.setState({inputmajor: event.target.value});}handleMinor(事件){this.setState({inputminor: event.target.value});}句柄制造商(事件){this.setState({inputmanufacturer: event.target.value});}处理提交(事件){警报('提交:' + this.state.inputuuid + this.state.inputmajor + this.state.inputminor + this.state.inputmanufacturer);event.preventDefault();}使成为() {返回(<div><div><div className="动画淡入淡出"><br/><div className="card" style={{ width: 57 + '%' }}><div className="card-header">信标设置

<div className="卡片块"><div className="input-group mb-1"><span className="input-group-addon"><i className="icon-user"></i></span><input type="text" className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID"/>

<div className="input-group mb-1"><span className="input-group-addon"><i className="fa fa-align-justify"></i></span><input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/>

<div className="input-group mb-1"><span className="input-group-addon"><i className="fa fa-align-justify"></i></span><input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/>

<div className="input-group mb-1"><span className="input-group-addon"><i className="fa fa-align-justify"></i></span><input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="制造商编号"/></div><center><Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" onClick={this.handleSubmit} activeClassName="活动">保存</链接><Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">高级设置</链接></中心>

</div></div>

)}}导出默认模态；

我已经接受了用户输入，现在我想使用我无法发送的 POST 请求将它们发送到服务器.我只得到用户的值，这些值可以通过我输入的警报看到，但无法发送到服务器

解决方案

尝试使用以下方式

fetch('https://mywebsite.com/endpoint/', {方法:'POST'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'，},正文:JSON.stringify({firstParam: '你的价值',secondParam: '你的其他值',})});

React 要求对帖子正文数据进行字符串化

import React, { Component } from 'react';
import { Link } from 'react-router'

class Modals extends Component {
  constructor(props){
    super(props);
    this.state = {inputuuid: '',
    inputmajor: '' ,
    inputminor: '' ,
    inputmanufacturer: ''};
    this.handleUuid = this.handleUuid.bind(this);
    this.handleMajor = this.handleMajor.bind(this);
    this.handleMinor = this.handleMinor.bind(this);
    this.handleManufacturer = this.handleManufacturer.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    alert("started");
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
 {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
    name: "beacon name 1234",
    description: "beacon description here for beacon",
    uuid: "this.state.inputuuid1",
    major: "this.state.inputmajor",
    minor: "this.state.inputminor",
    manufacturer: "this.state.inputmanufacturer",
    beaconType: "type9",
    location: "main gate8",
    floor: "ist",
    zone: "58c29c06d3ec866803040e6e"
})
}).then(function(response){
  if(response.ok) {
      console.log(response)
    return response;
  }
  throw new Error('Network response was not ok.');
}).then(function(data) { 
  console.log(data);
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error);
});
}

handleUuid(event) {

    this.setState({inputuuid: event.target.value});
  }
  handleMajor(event){
    this.setState({inputmajor: event.target.value});
  }
  handleMinor(event){
    this.setState({inputminor: event.target.value});
  }
  handleManufacturer(event){
        this.setState({inputmanufacturer: event.target.value});
  }
handleSubmit(event) {

    alert('Submitted: ' + this.state.inputuuid + this.state.inputmajor + this.state.inputminor + this.state.inputmanufacturer);
    event.preventDefault();
  }

  render() {
    
    return (<div><div>
          <div className="animated fadeIn">
            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Beacon Settings
              </div>
              <div className="card-block">
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-user"></i></span>
                  <input type="text"  className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID" />
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/>
                </div>

                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
                  <input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="Manufacturer Number"/>
                </div><center>
                <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success"  onClick={this.handleSubmit} activeClassName="active">Save</Link>

<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>

            </div>
          </div>
</div></div>
      </div>
      
        
      
    )
  }
}

export default Modals;

i had taken the user inputs now i want to send them to the server using POST request which i can not able to send. i am only getting the values by the user and those can be seen by the alert i had put in that but can't able to send to the server

解决方案

Try using following way

fetch('https://mywebsite.com/endpoint/', {
 method: 'POST',
 headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
},
body: JSON.stringify({
  firstParam: 'yourValue',
  secondParam: 'yourOtherValue',
 })
});

React require stringify post body data

这篇关于如何使用POST请求将动态获取的输入数据发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆