在不刷新页面的情况下刷新 Div

Question

我正在使用Laravel（这只是因为我需要刷新内容部分才相关），我基本上需要刷新页面的内容部分而不刷新页面。

我尝试使用 jQuery 删除 div，然后重新渲染视图，但它仍然无法正常工作。

主要问题是我有 jQuery 脚本，这些脚本包含在带有刀片格式的 If/Then/Else 中，但我需要在不重新加载整个页面的情况下对其进行更改（它适用于移动设置，并重新呈现页面在网络上更容易然后完全重新加载它，它看起来也更好。

以下是相关代码：

  @if(Auth::check())
@if(Auth::user()->isRider() || Auth::user()->isDriver())
  <script>
    var watchid;
    var csrf_token = $('meta[name="csrf-token"]').attr('content');
    //User is already a rider/driver
    if (navigator.geolocation) {
        watchid = navigator.geolocation.watchPosition(setPos, fail, {
          enableHighAccuracy: true,
          maximumAge: 3600000,
          timeout: 20000
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }


    function setPos(pos) {
      var coords = [pos.coords.latitude, pos.coords.longitude];
      sendData('/updatePosition',
      {'latitude': coords[0], 'longitude': coords[1], '_token': csrf_token},
      function(msg) {
        //Success function
      },
      function(msg) {
        //Error function
      });
      $('#map').removeMarker('userLoc');
      $('#map').addMarker({
        coords: [coords[0], coords[1]], // GPS coords
        id: 'userLoc',
      })
      @if(Auth::user()->isDriver())
        var geocoder  = new google.maps.Geocoder();
        var address;
        var latlng = {lat: coords[0], lng: coords[1]};
        geocoder.geocode({'location': latlng}, function (results, status) {
          if(status == 'OK') {
            address = results[1].formatted_address;        // if address found, pass to processing function
            $('#map').addWay({
              start: address,
              end: [29.0644224,-110.9673875],
              route: 'way',
            });
          }
        });
      @endif
    }

    function fail() {
      console.log('Location failed.')
    }
  </script>
@else
  <script>
    var watchid;
    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    $(document).on('click touchstart', '#getRide', function() {
      @if(Auth::user()->numDrivers() > 0)
        if (navigator.geolocation) {
          watchid=navigator.geolocation.watchPosition(setPos, fail, {
              enableHighAccuracy: true,
              maximumAge: 3600000,
              timeout: 20000
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }


        function setPos(pos) {
          var coords = [pos.coords.latitude, pos.coords.longitude];
          sendData('/getRide',
          {'latitude': pos.coords.latitude, 'longitude': pos.coords.longitude, '_token': csrf_token},
          function(msg) {
            $('#deleteThis').remove();
            $('#rideButtons').hide();
            $('#mainDiv').prepend(msg);
          },
          function(msg) {
            //Error function
            navigator.geolocation.clearWatch(watchid);
          });
          //Start updating the riders position
          sendData('/updatePosition',
          {'_token': csrf_token, 'latitude': coords[0], 'longitude': coords[1]},
          function(msg) {
            //Success
          },
          function(msg) {
            //Error
          });
        }

        function fail() {
          console.log('Location failed.')
        }
      @else
        toastr.error('No drivers available.', 'Request Failed');
      @endif
    });

    $(document).on('click touchstart', '#giveRide', function() {
      var watchid;

      if (navigator.geolocation) {
        watchid=navigator.geolocation.watchPosition(setPos, fail, {
            enableHighAccuracy: true,
            maximumAge: 3600000,
            timeout: 20000
          });
          $('#map').googleMap();
      } else {
          alert("Geolocation is not supported by this browser.");
      }


      function setPos(pos) {
        var markerPositions = "{{Auth::user()->getRiderLocs()}}";
        var coords = [pos.coords.latitude, pos.coords.longitude];
        @if(!Auth::user()->isDriver())
          sendData('/addDriver',
          {'latitude': pos.coords.latitude, 'longitude': pos.coords.longitude, '_token': csrf_token},
          function(msg) {
            $('#deleteThis').remove();
            $('#rideButtons').hide();
            $('#mainDiv').prepend(msg);
          },
          function(msg) {
            //Error function
            toastr.error('Error! '+msg);
            navigator.geolocation.clearWatch(watchid);
          });
        @endif
        //Start updating the drivers position
        sendData('/updatePosition',
        {'_token': csrf_token, 'latitude': coords[0], 'longitude': coords[1]},
        function(msg) {
          //Success
        },
        function(msg) {
          //Error
        });
        var geocoder  = new google.maps.Geocoder();
        var address;
        geocoder.geocode({'latLng': [parseFloat("{{Auth::user()->getLoc()[0]}}"), parseFloat("{{Auth::user()->getLoc()[1]}}")]}, function (results, status) {
          if(status == google.maps.GeocoderStatus.OK) {           // if geocode success
            address = results[0].formatted_address;         // if address found, pass to processing function
          }
        });
        if(markerPositions.length) {
          $('#map').addWay({
            start: address,
            end: [29.0644224,-110.9673875],
            route: 'way',
            step: [markerPositions],
          });
        } else {
          $('#map').addWay({
            start: address,
            end: [29.0644224,-110.9673875],
            route: 'way',
          });
        }
        $('#deleteThis').remove();

      }

      function fail() {
        console.log('Location failed.')
      }
    });
  </script>
@endif
@else
<script>
  var watchid;

  if (navigator.geolocation) {
      watchid = navigator.geolocation.watchPosition(setPos, fail, {
        enableHighAccuracy: true,
        maximumAge: 3600000,
        timeout: 20000
      });
  } else {
      alert("Geolocation is not supported by this browser.");
  }


  function setPos(pos) {
    var coords = [pos.coords.latitude, pos.coords.longitude];
    /*$("#map").googleMap({
      zoom: 12, // Initial zoom level (optional)
      coords: [coords[0], coords[1]], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });*/
    $('#map').removeMarker('userLoc');
    $('#map').addMarker({
      coords: [coords[0], coords[1]], // GPS coords
      id: 'userLoc',
    })
  }

  function fail() {
    console.log('Location failed.')
  }
</script>
@endif

它有点像超级克隆，但是当我刷新它时我需要它来刷新 jQuery，以便获得不同的脚本。

是否有另一种方法可以在不重新加载的情况下刷新页面的内容部分？或者我该怎么办？

也许只是重新创建视图是一样的？

• 扎克

Answer 1

将jquery的脚本放在head中，在head中添加脚本后调用js的这个函数。

<script type="text/javascript">
function LoadMyJs(scriptName) {
var docHeadObj = document.getElementsByTagName("head")[0];
var dynamicScript = document.createElement("script");
dynamicScript.type = "text/javascript";
dynamicScript.src = scriptName;
docHeadObj.appendChild(newScript);
}
</script>