如何自动获取用户的地理位置值并将其作为 POST 请求发送到后端
Posted
技术标签:
【中文标题】如何自动获取用户的地理位置值并将其作为 POST 请求发送到后端【英文标题】:How to automatically get and send User's geolocation values as a POST request to the backend 【发布时间】:2019-06-21 10:24:41 【问题描述】:我是一名初级前端开发人员,使用 formik 构建一个 react web 表单,该表单会自动获取用户的位置并将其作为 post 请求发送到后端。我已经能够使用地理定位 API 来获取用户的纬度和经度,但不知道如何将其作为对象和发布请求传递。
这是一个电子商务网站,根据附近的商家为用户提供不同的服务。
class DriverForm extends Component
constructor()
super();
this.state =
ready: false,
where: lat: null, lng: null ,
error: null
;
componentDidMount()
//automatic location finder code goes here
const geoOptions =
enableHighAccuracy: true,
timeOut: 20000,
maximumAge: 60 * 60 * 24
;
this.setState( ready: false, error: null );
navigator.geolocation.getCurrentPosition(
this.geoSuccess,
this.geoFailure,
geoOptions
);
geoSuccess = position =>
console.log(position.coords.latitude, position.coords.longitude);
this.setState(
ready: true,
where: lat: position.coords.latitude, lng: position.coords.longitude
);
;
geoFailure = err =>
this.setState( error: err.message );
;
render()
return (
<>
<div id="map" />
<div className="form-position">
<h1 className="signupHeader">Driver Sign up</h1>
<Formik
initialValues=
firstName: "",
lastName: "",
email: "",
phone: "",
password: "",
validationSchema=DriverSchema
onSubmit=values => alert(JSON.stringify(values, null, 2))
>
(
handleSubmit,
handleChange,
handleBlur,
values,
setFieldValue,
isSubmitting,
handleReset
) => (
<Form>
<div className="name-field-position">
<br />
<ErrorMessage
className="error"
name="firstName"
component="span"
style= color: "red"
/>
<Field
name="firstName"
type="text"
className="inner-field-spacing field-display"
placeholder="Your First Name"
style= textAlign: "center", color: "purple"
id="firstName"
onChange=handleChange
onBlur=handleBlur
value=values.name
/>
<br />
<ErrorMessage
className="error"
name="lastName"
component="span"
style= color: "red"
/>
<Field
name="lastName"
type="text"
className="inner-field-spacing field-display"
placeholder="Your Last Name"
style= textAlign: "center", color: "purple"
id="lastName"
onChange=handleChange
onBlur=handleBlur
value=values.name
/>
</div>
<br />
<ErrorMessage
className="error"
name="email"
component="span"
style= color: "red"
/>
<Field
name="email"
type="email"
className="inner-field-spacing field-display"
placeholder="janedoe@email.com"
style= textAlign: "center", color: "purple"
id="email"
onChange=handleChange
onBlur=handleBlur
value=values.name
/>
<br />
<ErrorMessage
className="error"
name="password"
component="span"
style= color: "red"
/>
<Field
name="password"
type="password"
className="inner-field-spacing field-display"
placeholder="password"
style= textAlign: "center", color: "purple"
onChange=handleChange
onBlur=handleBlur
value=values.name
/>
......
<a href="/" className="button-flex">
<button
className="registerButton2"
type="submit"
disabled=isSubmitting
>
Become A Driver
</button>
</a>
</Form>
)
</Formik>
</div>
</>
);
export default DriverForm;
【问题讨论】:
看看fetch
API。 developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
谢谢,我现在就去做。
@Jaxi 感谢指导,我现在明白了。
【参考方案1】:
在您的 onSubmit
道具中使用 fetch
发送一个帖子请求,或者我个人更喜欢 axios 到您的后端 URL:
onSubmitvalues =>
const request = axios.post(url, values)
request.then("handle your response in here")
【讨论】:
以上是关于如何自动获取用户的地理位置值并将其作为 POST 请求发送到后端的主要内容,如果未能解决你的问题,请参考以下文章
SQL - 如何获取列的值并将其作为新列的值放在字符串的末尾
如何获取用户的设备令牌并将其作为 PDF 文件附加到电子邮件中?