简体   繁体   English

无需使用 jQuery 重新加载网页即可更新经典 ASP DIV

[英]Update Classic ASP DIV without reloading the webpage using jQuery

This should be really simple, so, either I am over thinking it or making it more complicated than it should be.这应该很简单,所以,要么我想多了,要么让它变得比它应该的更复杂。

I would like to update a DIV without having to reload the webpage.我想更新 DIV 而不必重新加载网页。

A form on Canvas.asp queries the database and returns the coordinates of a GPS device. Canvas.asp 上的表单查询数据库并返回 GPS 设备的坐标。 The coordinates are updated every minute and would like the script to return the latest coordinates without having to refresh the page.坐标每分钟更新一次,并希望脚本无需刷新页面即可返回最新坐标。 The coordinates are appended to a separate XML file.坐标附加到单独的 XML 文件中。

I have written this;我写过这个;

<script type="text/javascript">
    $(document).ready(function() {
      $("#map").load('canvas.asp');
      var auto_refresh = setInterval(function() {
        $("#map").load('canvas.asp?std=<%=session("7digit")%>&submit=Search&execute=1');
      }, 60000);
      $.ajaxSetup({ cache: false });
    });
</script>

The div to be reloaded;要重新加载的 div;

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

The script returns an error by duplicating the header and content, after 60 seconds the map DIV is nowhere to be seen... Simply disappears!该脚本通过复制标题和内容返回错误,60 秒后地图 DIV 无处可见......只是消失了! The coordinates are appended to the XML file every 60 seconds, even after the error.坐标每 60 秒附加到 XML 文件,即使发生错误也是如此。

What am I doing wrong?我究竟做错了什么?

Looks like you are always returning the full result of your canvas.asp page which will always be a full HTML document which will not play nice with your <div> .看起来您总是返回canvas.asp页面的完整结果, canvas.asp页面将始终是一个完整的 HTML 文档,与您的<div>效果canvas.asp

The issue here is how you handle passing partial content back and that comes down to how you structure your ASP page.这里的问题是您如何处理传递回的部分内容,这归结为您如何构建 ASP 页面。 Here is a bare bones template I use often for this type of thing.这是我经常用于此类事情的裸骨模板。

<%
    Option Explicit

    Dim action, def_action

    Const BASE_ERROR_VAL = 1000
    Const DISPLAY_PAGE = 0
    Const DISPLAY_CANVAS_CONTENT = 1

    'Without this the page does nothing, this is the gateway to your page.
    Call init()

    'First code that get's run when page is requested
    Sub init()
      'Defaults
      def_action = DISPLAY_PAGE

      'Process query string
      action = Request.QueryString("a") & ""
      If Len(action) > 0 and Isnumeric(action) then action = CInt(action) Else action = def_action

      Select Case action
      Case DISPLAY_PAGE
        Call load_page()
      Case DISPLAY_CANVAS_CONTENT
        Call load_canvas()
      Case Else
        'As we have a default this should NEVER happen, but always worth covering your bases.
        Call Err.Raise(vbObjectError + BASE_ERROR_VAL + 1, "canvas.asp", "Action required")
      End Select
    End Sub

    Sub load_page()
>%
<html>
  <head>
  ...
  </head>

  <body>
    <% Call load_canvas() %>
  </body>
</html>
<%
    End Sub

    Sub load_canvas()
%>
    <canvas>
    ...
    </canvas>
<%
    End Sub
%>

This is purely bare bones and is just designed to give you an idea of how you could approach it, so for example to call just the canvas part of the HTML you would use something like这纯粹是裸露的骨头,旨在让您了解如何处理它,例如,仅调用 HTML 的画布部分,您将使用类似的东西

canvas.asp?std=<%=session("7digit")%>&a=1

and either not pass &a at all (as DISPLAY_PAGE is the default) or pass并且根本不通过&a (因为DISPLAY_PAGE是默认值)或通过

canvas.asp?std=<%=session("7digit")%>&a=0

to display the whole HTML.显示整个 HTML。

You might also noticed I included你可能还注意到我包括

<% Call load_canvas() %>

inside the load_page() procedure, this is just for the situation where you might want the content of the canvas also rendered on the full pass and then changed later on via a partial pass using a=1 for example.load_page()过程中,这仅适用于您可能希望画布的内容也在整个过程中呈现的情况,然后稍后通过使用a=1的部分过程进行更改。

While the answer provided by @Lankymart demonstrates the desired page template and the correct layout of code which enables greater flexibility, the answer is a simple Ajax function.虽然@Lankymart 提供的答案演示了所需的页面模板和正确的代码布局,从而实现了更大的灵活性,但答案是一个简单的 Ajax 函数。

setInterval(ajaxRequest, 15000);
    function ajaxRequest() {
        $.ajax({
            type: 'GET',
            url: 'xmlUpdateScript.asp',
            data: {
                7digit: "<%=session("7digit")%>"
            }
        });
    }

The Ajax request executes the 'xmlUpdateScript.asp' and returns the next set of coordinates which are placed inside the XML document and can be rendered to the map. Ajax 请求执行“xmlUpdateScript.asp”并返回下一组坐标,这些坐标放置在 XML 文档中并可呈现到地图上。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM