jquery - 表单提交时页面加载两次

Question

我有这段代码，它从访问者那里检索数据，然后通过隐藏的输入将数据发送到 php 代码。我在页面加载时发送所有这些数据，因此页面加载两次(正常加载然后表单提交重新加载)。这是代码:

jQuery(function(){
    if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(sendPosition);
        } else { 
            alert("Geolocation is not supported by this browser.");
        }

jQuery(function(){
    function sendPosition(position) {
        var lat =  position.coords.latitude;
        var lng =  position.coords.longitude;



        var form = document.createElement("form");
        form.setAttribute("method", "POST");
        form.setAttribute("action", "");
        form.setAttribute("id", "loc");

        var hiddenField1 = document.createElement("input");
        hiddenField1.setAttribute("type", "hidden");
        hiddenField1.setAttribute("name", "lat");
        hiddenField1.setAttribute("value", lat);

        var hiddenField2 = document.createElement("input");
        hiddenField2.setAttribute("type", "hidden");
        hiddenField2.setAttribute("name", "lng");
        hiddenField2.setAttribute("value", lng);

        form.appendChild(hiddenField1);
        form.appendChild(hiddenField2);
        document.body.appendChild(form);
        form.submit();
        }
});

我确信脚本注册和排队，我是对的。有没有办法解决重新加载的问题？

Answer 1

“加载两次”是什么意思？ 您发布的代码将在页面完全加载后运行，然后进行表单提交。提交事件将导致页面再次重新加载。你是这个意思吗？

如果您想在不刷新页面的情况下发布位置数据，您有 2 个选择:

(A) 简单:添加一个不可见的 iframe 并为该 iframe 设置表单“目标”属性。这将导致 iframe 重新加载，而页面的其余部分将不会重新加载。

(B) 更好:通过ajax提交数据。这需要您添加 an ajax handler接收并处理数据。

在这两种情况下，页面都会提交位置数据但不会刷新。 顺便提一句。您还可以通过 jQuery 以更好的方式创建该表单。

示例:

jQuery(function() {
  if (navigator.geolocation) {
    // Add this to find out if the code is called twice:
    alert("Get the user location...");  

    navigator.geolocation.getCurrentPosition(sendPosition);
  } else { 
    alert("Geolocation is not supported by this browser.");
  }

  function sendPosition(position) {
    // Add this to find out if the code is called twice:
    alert("sending the position");

    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    // Solution (A)
    var iframe = jQuery('<iframe name="dummy"></iframe>')
    var form = jQuery('<form method="POST" target="dummy" action="">'); // Note: target=""
    jQuery('<input type="hidden" name="lat" />').val(lat).appendTo(form);
    jQuery('<input type="hidden" name="lng" />').val(lng).appendTo(form);
    iframe.appendTo('body').hide();
    form.appendTo('body').submit();

    // Solution (B)
    var args = {
      "lat": lat,
      "lng": lng,
      "action": "save-coords"
    };
    jQuery.post(ajaxurl, args, function(resp) { 
      alert( "Server response: " + resp ); 
    });
    // Note: In WordPress you have to add these two ajax handlers:
    // add_action( 'wp_ajax_save-coords', 'my_save_coords' );
    // add_action( 'wp_ajax_nopriv_save-coords', 'my_save_coords' );
  }
});