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文件应该接收用户的电话号码，确定坐标，然后通过发布请求将电话号码和纬度推送到服务器。

整理地理坐标识别部分。因此，我需要帮助

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

    })

}

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

1 个答案: