如何自动获取用户的地理位置值并将其作为 POST 请求发送到后端

Posted 2023-02-23

【中文标题】如何自动获取用户的地理位置值并将其作为 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="[e-mail]"
                  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")