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

Question

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

如何在不刷新整个页面的情况下做到这一点，例如仅刷新 <div>包含 Google map ？

<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 map :

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

Google map 的 JS:

<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 模式来刷新页面的一部分。

1. 将您的 SQL 代码移至另一个脚本中 - 例如查询.php
2. 以 JSON 格式返回结果列表
3. 当列表更改时调用 runQuery
4. 使用该函数解析返回的数据并更新您的 map

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