Question

我有一个网站根据表单中的用户输入加载数据。我还想基于相同的输入刷新谷歌地图。不幸的是，当我提交表单时，它通过SQL查询正确检索数据，但刷新页面导致谷歌地图重置为原始起点。解决这个问题的最佳方法是什么？

以下是表单代码：

<form id="user-location" method="post" action="#" onsubmit="return codeAddress();">
                    <input id="addressInput" name="addressInput" type="text" maxlength="5">

                   <input id="submit4" value="GO" type="submit"  >

                </div>
</form>

以下是Google地图脚本的一部分：

function codeAddress() {
  var address = document.getElementById('addressInput').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Answer 1

如果您不想重新加载页面，请不要执行onsubmit。而是将您的HTML更改为...

<div id="user-location">
    <input id="addressInput" name="addressInput" type="text" maxlength="5"/>
    <input id="submit4" value="GO" type="submit" onclick="codeAddress();"/>
</div>

在您运行地理编码请求后，您的Javascript只会在不提交表单的情况下更新地图。或者您也可以使用jQuery附加click事件，如此...

$(document).ready(function () {
    $('#submit4').click(function () {
        codeAddress();
    });
});

或者你可以在那里插入你的整个请求。要完成这项工作，您可以删除onclick事件。但是，如果您不想依赖jQuery，只需使用第一个解决方案即可。同样，关键是不要完整提交。要与PHP文件通信，请让您的函数通过...

将结果作为JSON返回

echo json_encode($geodata);

...然后使用$.getJSON请求它，这是一个jQuery实用程序，就像这样...

$.getJSON('[php script name].php[?any args]', function(data) {
    // assign your geocodes here
});

Answer 2

您希望阻止表单的默认行为（即提交），对于跨浏览器解决方案，我建议使用jQuery防止默认功能。 Check it out here.

使用php和javascript表单提交

2 个答案: