전체 페이지가 아닌 div 만 새로 고치는 방법

Question

식당의 유형을 선택하는 코드가 있습니다. 모든 유형을 선택하면 페이지가 새로 고쳐지고 일부 SQL 처리 후 선택한 유형에 해당하는 모든 레스토랑이 Google지도에 표시됩니다.

전체 페이지를 새로 고치지 않고도 Google지도가 포함 된 <div> 만 새로 고침하지 않고 어떻게 할 수 있습니까?

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

다음과 같은 요소는 Google지도 포함 :

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

을 선택하면이 코드가 실행됩니다 Google지도에 대한

<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. 반환 목록 변경 RUNQUERY
3. 이지도 반환 된 데이터를 분석하고 업데이트하는 기능을 사용 부르는 JSON 형식
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

- 서버가 페이지의 일부분을 추가하거나 덮어 쓰는 데 사용하는 정보를 반환합니다.