我是编程和英语的初学者。(我是日本人。)
我请求您的合作。
我想知道如何正确加载 HTML 文件，包括使用 ajax 进行处理。
我已经尝试使用ajax加载包含JavaScript的HTML文件并且成功了。
(它在 IE9 上无法正常工作，我也想知道这个原因。)
我还尝试使用ajax加载包含canvas标签的HTML文件，也成功了。
我似乎可以加载一个 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>
最佳答案
你的ajax函数应该是这样的:
$(function() {
$("#loadButton").on("click", function() {
$.ajax({
url: "processing.html",
type: "GET",
dataType: "html",
success: function(res) {
$("#contents").html(res);
});
});
});
关于javascript - 如何加载使用 ajax 编写的处理脚本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19739463/