如何刷新只有一個div，而不是整個頁面

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 
} 

及以下元素包含谷歌地圖：

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

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代碼移動到另一個腳本中 - 例如， query.php
2. 返回的結果的一個JSON格式
3. 當列表更改來電runQuery
4. 使用函數解析返回的數據和更新您的地圖列表

<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概念，您只需更改頁面的一部分，而無需進行整頁刷新或回發。

你會發現噸的例子對你正在嘗試做的，但主要的概念是，你會：

-Take用戶輸入

-call回值與您的服務器

- 具備服務器返回您的信息，你再使用追加或覆蓋頁