如何自动获取用户的地理位置值并将其作为 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 文件附加到电子邮件中?

如何从文本字段中获取值并将其传递给变量?

如何获取在我的网站上发帖的用户的地理区域并将其存储在数据库中[关闭]

Filenet - 如何获取工作流组中的属性值