将HTML表单数据发送到外部JavaScript，并从JavaScript发送发布请求

Question

我正在尝试构建一个网页，用户输入电话号码，该电话号码通过HTML POST请求发送到服务器，例如：

<form action="/collectUserData" method="POST">
  <div>
    <input name="to" value="Enter your phone number">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

但是，我不想使用此方法，因为我还想将用户的地理坐标与电话号码一起发送到服务器。可以通过几行JavaScript捕获地理坐标。

所以我想要的是，一旦用户输入输入文本框中的电话号码并按提交按钮，则应将表单数据发送到在同一目录中运行的JS文件。令JS文件的名称为sendUserInfo.js

此JS文件应接收用户的电话号码，确定坐标，然后通过POST请求将电话和纬度推向服务器。

分类地理坐标识别零件。因此，我需要有关

的帮助

1(将表单数据发送到在同一目录中运行的JS文件(严格不是在带有script标签的HTML中，而是在单独的JS文件中(

2(使用发布请求将数据从JavaScript推向服务器。

我搜索了做一个很大的方法，但找不到严格不使用具有<script></script>标签的内联JS的方法，而我需要使用单独的JS文件的东西。任何帮助将不胜感激。

最欢迎node.js的答案。

Answer 1

您可以使用"提交"按钮上的onclick属性。在下面的示例中，我将jQuery用于Ajax调用。

<form action="#" >
  <div>
    <input id="to" name="to" value="Enter your phone number">
  </div>
  <div>
    <button onclick="sendInfo(event)">Submit</button>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="sendUserInfo.js"></script>

senduserinfo.js

function sendInfo(e){
    e.preventDefault();
    navigator.geolocation.getCurrentPosition(function(position){
        ele = document.getElementById("to");
        $.ajax({
            url: "/collectUserData",
            data: {
                phone_number: ele.value,
                lat: position.coords.latitude,
                long: position.coords.longitude
            },
            method: "POST",
            success: function(){
                //handle successful post
            },
            error: function(){
                //handle error
            }

        })
    }, function(){
        //handle error
    })
}