1

我是编程和英语的初学者。（我是日本人。）
我请求您的合作。

我想知道如何正确加载 HTML 文件，包括使用 ajax 进行处理。

我已经尝试使用 ajax 加载包含 JavaScript 的 HTML 文件，并且成功了。
（它在 IE9 上无法正常工作，我也想知道这个原因。）

而且我还尝试加载一个 HTML 文件，包括一个带有 ajax 的 canvas 标签，它也成功了。

我似乎可以加载一个 HTML 文件，包括使用 ajax 进行处理，但它没有显示。

下面有3个案例。
http://minipages.webcrow.jp/testajax/ajax.html

请帮助我的前辈，并为我糟糕的英语感到抱歉。

/////源代码/////
//ajax_processing.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <!--IE9mode --><meta http-equiv="X-UA-Compatible" content="IE=9" />
 <title>Ajax</title>
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <style>
  #contents {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background:#ff0;
   z-index:-1;
  }
 </style>
</head>
<body>
 <div id="contents">
 </div>
 <div id="control">
  <button id="loadButton">load_processing</button>
 </div>
 <!--jquery ajax -->
 <script>
  $(function() {
    $("#loadButton").on("click", function() {
      $.ajax({
        url: "processing.html",
        type: "GET",
        dataType: "html"
      }).done(function(res) {
        $("#contents").html(res);
      });
    });
  });
 </script>
</body>

//处理.html

<!--Processing.js and canvas.js-->
<script src="processing.js"></script>
<script src="../../excanvas.js">
</script><script src="init.js"></script>
<div STYLE="position:absolute; top:50%; left:50%;
 width:1280px; height:300px;margin-top:-150px;margin-left:-640px;">
  <script type="application/processing">
    void setup() {
      size(1280,300);
      background(230);
      stroke(255, 255, 0, 1);
      strokeWeight(1);
      frameRate(24);
      smooth();
    }
    float len = 4;
    float lastX,lastY;
    float startX = random(width);
    float startY = random(height);
    int t = 0;
    void draw() {
      t = 0;
      int red = 140+round(random(startX/width)*90);
      int green =80+round(random(startY/height)*100);
      int blue = 80;
      int kosa = 55;
      while (t <= 30) {
        if (startX < 0 || startX>width || startY <0 || startY>height) {
          kosa=0;
        }
        if (startX >=0 && startX<=width && startY >=0 && startY<=height) {
          stroke(red, green, blue, kosa);
          float rad = radians(random(363));
          lastX = startX + cos(rad)*len*(width/height);
          lastY = startY + sin(rad)*len;
          line(startX, startY, lastX, lastY);
          line(startX, startY, startX+cos(rad)*50, startY+sin(rad)*50);
          startX = lastX;
          startY = lastY;
        }
        else if (startX <0) {
          startX = width - random(len);
        }
        else if (startX > width) {
          startX = 0 + random(len);
        }
        else if (startY <0) { 
          startY = height - random(len);
        }
        else if (startY >height) {
          startY = 0 + random(len);
        }
        strokeWeight(1);
        stroke(255, 20);
        line(startX, startY, startX+random(40)-20, startY+random(40)-20);
        t++;
      }
      float t2 = 0;
      float x = 0;
      float y = 0;
      while (t2<=width/50) {
        fill(240, 15);
        stroke(255, 0);
        rect(random(width), y, 1, height);
        t2++;
      }
      t2 = 0;
      while (t2<=height/50) {
        fill(240, 15);
        stroke(255, 0);
        rect(x, random(height), width, 1);
        t2++;
      }
    }
  </script>
  <canvas></canvas>
</div>
4

1 回答 1

0

您的 ajax 函数应如下所示：

$(function() {
    $("#loadButton").on("click", function() {
      $.ajax({
        url: "processing.html",
        type: "GET",
        dataType: "html",
        success: function(res) {
        $("#contents").html(res);
      });
    });
  });
于 2013-11-02T06:17:36.817 回答