首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何只刷新div,而不是整个页面

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

Stack Overflow用户
提问于 2013-10-25 07:28:37
回答 2查看 181关注 0票数 0

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

我如何才能做到这一点而不刷新整个页面,比如只刷新包含Google Maps的<div>

代码语言:javascript
运行
复制
<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>

选择后,将运行此代码:

代码语言:javascript
运行
复制
if($_REQUEST['type']) {
// do some thing and refrsh map div
} else {
// do some thing and refrsh map div
}

下面的元素包含Google Maps:

代码语言:javascript
运行
复制
<div id="mppp" class="map"></div> 

JS for Google Maps:

代码语言:javascript
运行
复制
<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>  
EN

回答 2

Stack Overflow用户

发布于 2013-10-25 07:35:05

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

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

<代码>G29

代码语言:javascript
运行
复制
<script>
function runQuery() {
    $.ajax({
        url: "query.php?type="+ $("#type").val(),
        cache: false,
        success: function(data){
            // code to process your results list;
        }
    });
}
</script>
票数 2
EN

Stack Overflow用户

发布于 2013-10-25 07:37:36

这是一个AJAX概念,您可以只更改页面的一部分,而不必进行整个页面刷新或回发。

你会发现一大堆关于你正在尝试做什么的例子,但主要的概念是你将会:

-Take用户输入

使用-call将值返回到服务器

-have服务器将返回信息,然后您可以使用这些信息追加或覆盖页面的一部分

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19578550

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档