将 HTML 表单数据发送到外部 javascript 并从 Javascript 发送 post 请求

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) 通过 POST 请求将数据从 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

    })

}