Question

我有这个代码选择餐馆的类型。选择任何类型后，页面都会刷新，经过一些SQL处理后，我会获得与所选类型相对应的所有餐厅，并在Google地图中显示。

如何在不刷新整个页面的情况下执行此操作，例如仅刷新包含Google地图的<div>？

<select class="mapleftS" name="type" id="type" onchange="changeType(this.value)">
    <option value="0">كل الانواع</option>
    <?$type = mysql_query("select * from rest_type ");
    while($rod = mysql_fetch_array( $type )) {
        if($rod[id] == $_REQUEST['type'])
            $selll = 'selected';
        else {$selll = '';
    ?>
    <option value="<?=$rod[id]?>" <?=$selll?> ><?=$rod[name]?></option>
    <? } ?>                                            
</select>
<script>
    function changeType( id ) {
        parent.location = '?type=' + id;
    } 
    $(function() {
        var text_menu = $("#type option:selected").text();
        $("#ddddd_").html(text_menu);
    });
</script>

选择此代码后运行：

if($_REQUEST['type']) {
// do some thing and refrsh map div
} else {
// do some thing and refrsh map div
}

以下元素包含Google地图：

<div id="mppp" class="map"></div>

Google for Google Maps：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=SOMEAPIKEY&sensor=true"></script>

<script type="text/javascript">
  var address_index = 0, map, infowindow, geocoder, bounds, mapinfo, intTimer;
  $(function (){
    mm();   
  });

  mm = function() {
    // Creating an object literal containing the properties you want to pass to the map
    var options = {
      zoom: 15,
      center: new google.maps.LatLng(24.701564296830245, 46.76211117183027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Creating the map
    map = new google.maps.Map(document.getElementById('mppp'), options);
    infowindow = new google.maps.InfoWindow();
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds();

    //******* ARRAY BROUGHT OVER FROM SEARCHRESULTS.PHP **********
    mapinfo = [ <?=$da?> ];
    intTimer = setInterval("call_geocode();", 300);
  }

  function call_geocode() {
    if( address_index >= mapinfo.length ) {
      clearInterval(intTimer);
      return;
    }
    geocoder.geocode({
      location: new google.maps.LatLng(mapinfo[address_index][6], mapinfo[address_index][7])
    }, (function(index) {
          return function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              // Scale our bounds
              bounds.extend(results[0].geometry.location);
              var $id = mapinfo[index][0];
              var $tell = mapinfo[index][3];
              var $title = mapinfo[index][2];
              var $img_src = mapinfo[index][3];
              var img_src = mapinfo[index][1];
              var $logo = mapinfo[index][4];
              var $status = mapinfo[index][5];
              var $sell = mapinfo[index][6];
              var $city = mapinfo[index][8];
              var marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapinfo[index][6], mapinfo[index][7]),
                icon: {
                  url : '<? bloginfo('url'); ?>' + img_src  + '',
                  scaledSize : new google.maps.Size(50,50)
                },
                map: map,
                scrollwheel: false,
                streetViewControl: true,
                title: $title
              });
              google.maps.event.addListener(marker, 'click', function() {
                // Setting the content of the InfoWindow
                if (img_src) {
                  var imdd = '<img src="<? bloginfo('url'); ?>' + img_src  + '" width="60" height="60" style="margin-left:4px;float:right;" />';
                }
                else {
                  var imdd = '';
                }

                if ($tell) {
                  var tell = 'رقم الهاتف : '+$tell+'<br>';
                }
                else {
                  var tell = '';
                }                               

                if ($status) {
                  var status = 'الحي : '+$status+'<br>';
                }
                else {
                  var status = '';
                }

                if ($city) {
                  var city = 'المدينة : '+$city+'<br>';
                }
                else {
                  var city = '';
                }

                var content = '<div id="info" style="direction:rtl;font:15px time new roman;font-weight:bolder;position:relative;width:210px;"><a href="#"><div style=" font-size:13px;font-family:Tahoma;font-weight:bolder;text-align:center;font-weight:bold">' + $title + '</div><br><div style="float:right">' + imdd + '</div><div style="float:right;text-align:right;font-family:Tahoma">' + tell + city + status + '</div></a><br /><a style="float:left;color:#d22f00;font-size:12px;font-family:Tahoma" href="<? bloginfo('url'); ?>/rest-det/?id=' + $id + '">المزيد+</a></div>';
                infowindow.setContent(content);
                infowindow.open(map, marker);
              });

              map.fitBounds(bounds);

              if (mapinfo.length == 1) {
                map.setZoom(12);
              }
            }
            else {
                // error!! alert (status);
            }
          }
        }
      )(address_index)
    );
    address_index++;
  }
  </script>
<div id="mppp" class="map"></div>

Answer 1

您可以使用AJAX模式刷新部分页面。

将您的SQL代码移动到另一个脚本中 - 例如query.php
以JSON格式返回结果列表
当列表更改时调用runQuery
使用该函数解析返回的数据并更新地图

<script>
function runQuery() {
    $.ajax({
        url: "query.php?type="+ $("#type").val(),
        cache: false,
        success: function(data){
            // code to process your results list;
        }
    });
}
</script>

Answer 2

这是一个AJAX概念，您只需更改页面的一部分，而无需进行整页刷新或回发。

你会发现很多关于你想要做什么的例子，但主要的概念是你会：

- 接受用户输入

- 使用值

回拨给您的服务器

- 服务器返回您用于附加或覆盖页面一部分的信息

如何只刷新div，而不是整个页面

2 个答案: