p5.js函数无法在ajax成功上运行 [英] p5.js functions not working on ajax success
问题描述
我正在尝试将p5.js集成到一个网页上，该网页将收到成功的响应.我想根据用户输入成为特定节点的信息来绘制一棵树.我正在使用Django作为后端.
I'm attempting to integrate a p5.js into a webpage that draws upon receipt of a successful response. I want to draw a tree based on a user entering information that becomes a certain node. I'm using Django as my backend.
views.py
def index(request):
if request.method != 'POST':
return render(request, 'index.html')
else:
if request.is_ajax():
parent = request.POST.get('parent')
child = request.POST.get('child')
try:
# various cases are run through...
# case 7: neither child nor parent saved to tree --
# create leaf from child and twig from parent
twig = Twig.objects.create(text=parent)
leaf = Leaf.objects.create(text=child)
leaf.twigs.add(twig)
data = {"twig_text" : twig.text,
"twig_drawing" : twig.drawing,
"twig_base_x" : 0,
"twig_base_y" : 20,
"twig_tip_x" : 20,
"twig_tip_y" : 25,
"leaf_text" : leaf.text,
"leaf_drawing" : leaf.drawing,
"leaf_base_x" : 20,
"leaf_base_y" : 25,
"leaf_tip_x" : 40,
"leaf_tip_y" : 50,
}
twig.drawing = "filled"
leaf.drawaing = "filled"
return JsonResponse(data)
else:
return render(request, 'index.html')
index.html
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="message" style="visibility: hidden;"></div>
<form method="POST">
{% csrf_token %}
<input type="text" id="txt" />
<input type="submit" id="grow" value="grow" style="color: grey;"/>
</form>
<script>
$("form").submit(function(e) {
e.preventDefault();
// ...
$.ajax({
url : window.location.href,
type : "POST",
data : { csrfmiddlewaretoken : csrftoken,
child : child,
parent : parent,
},
success : function(json) {
if (json["leaf_text"]){
console.log(json['leaf_text'] + " was retrieved.");
function setup(){
}
function draw(){
ellipse(random(20), random(50), random(10), random(20));
}
}
},
error : function(xhr, errmsg, err) {
console.log(xhr.status + ": " + xhr.responseText);
},
});
});
</script>
</body>
</html>
我的控制台测试成功.我无法弄清楚为什么成功"中接下来的几个功能什么都没做.我在萤火虫中没有收到任何错误消息. 我是p5的新手，但我不认为代码的一部分是问题所在，因为我就是这个示例: http://p5js.org/get-started/
My console test is successful. I can't figure out why the next few functions in 'success' aren't doing anything. I don't get any error messages in firebug. I'm new to p5, but I don't think that part of the code is the problem as I am this example: http://p5js.org/get-started/
推荐答案
您的根本问题是，虽然定义了函数setup()和draw()，但它们从未被调用.
Your root problem is that while the functions setup() and draw() are defined, they are never beeing called.
一个更基本的问题是您要在if语句中定义一个函数.尽管Javascript可以做到这一点，但这是非常糟糕的做法.通常要做的是在顶级或对象级别定义setup()和draw()，然后在需要时调用它们.
A more fundamental issue is that you are defining a function inside an if statement. While Javascript will allow this, it's pretty bad practice. What you'd normally do is define setup() and draw() at top or object levels, then call them when you need them.
这篇关于p5.js函数无法在ajax成功上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
