Javascript 如何自动获取和发送用户'；s地理位置值作为对后端的POST请求

我是一名初级前端开发人员，使用formik构建react web表单，自动获取用户的位置并将其作为post请求发送到后端。我已经能够使用地理定位API获取用户的纬度和经度，但不知道如何将其作为对象和post请求传递

这是一个电子商务网站，根据附近的企业为用户提供不同的服务

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;

class DriverForm扩展组件{
构造函数（）{
超级（）；
此.state={
就绪：错误，
其中：{lat:null，lng:null}，
错误：null
};
}
componentDidMount（）{
//自动定位代码在这里
常量地理选项={
EnableHighAccurance:正确，
超时：20000，
最大尺寸：60*60*24
};
this.setState（{ready:false，error:null}）；
navigator.geolocation.getCurrentPosition(
这是一次成功，
这是一次失败，
地理选项
);
}
geoSuccess=位置=>{
log（position.coords.latitude，position.coords.longitude）；
这是我的国家({
准备好了吗，
其中：{lat:position.coords.latitude，lng:position.coords.longitude}
});
};
geoFailure=err=>{
this.setState（{error:err.message}）；
};
render（）{
返回(
司机报名
警报（JSON.stringify（值，null，2））}
>
{({
手推，
handleChange，
车把，
价值观
setFieldValue，
提交，
把手套
}) => (








......
)}
);
}
}
导出默认驱动格式；

在您的

onSubmit中

道具使用

fetch

发送post请求，或者我个人更喜欢axios而不是您的后端URL：

onSubmit{values => {
  const request = axios.post({url, values})
  request.then("handle your response in here")
}}

---

在您的

onSubmit

道具中，使用

fetch

发送post请求，或者我个人更喜欢axios而不是您的后端URL：

onSubmit{values => {
  const request = axios.post({url, values})
  request.then("handle your response in here")
}}

---

查看

fetch

API。谢谢，我现在就做。@Jaxi谢谢你的指导，我现在明白了。看看

fetch

API。谢谢，我现在就做。@Jaxi谢谢你的指导，我现在明白了。