p5.js 函数在 ajax 成功时不起作用答案

【问题标题】：p5.js functions not working on ajax successp5.js 函数在 ajax 成功时不起作用
【发布时间】：2016-04-01 18:32:37
【问题描述】：

我正在尝试将 p5.js 集成到网页中，该网页会在收到成功响应后进行绘制。我想根据用户输入的信息绘制一棵树，该信息成为某个节点。我使用 Django 作为我的后端。

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

<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>

我的控制台测试成功。我无法弄清楚为什么“成功”中的接下来的几个函数没有做任何事情。我在 firebug 中没有收到任何错误消息。我是 p5 的新手，但我认为这部分代码不是问题，因为我就是这个例子：http://p5js.org/get-started/

【问题讨论】：

您的语法没有多大意义。为什么要在成功函数中声明 setup() 函数？为什么 draw() 函数在 setup() 函数中？
@KevinWorkman 绘制函数不在 setup() 函数中。因为官网有，所以就选了这个作为例子，相信设置功能可以省略。这一切都在“成功”之内，因为我想根据使用 ajax 的表单提交进行绘制。
好的，我现在看到了您的 setup() 函数上的右括号 - 如果使用正确的格式，这将更容易阅读！但是你的语法仍然没有意义。为什么要在 if 语句中定义函数？您预计何时调用这些函数？
@KevinWorkman 我想根据 json 对象中的不同键绘制不同的形状。例如，我的后端可能会发送 twig、branch 或 trunk 规范 - if 语句需要区分这些。

标签： json ajax django processing p5.js

【解决方案1】：

您的根本问题是，虽然定义了函数 setup() 和 draw()，但它们从未被调用过。

一个更根本的问题是您在if 语句中定义了一个函数。虽然 Javascript 允许这样做，但这是非常糟糕的做法。您通常会在顶层或对象级别定义 setup() 和 draw()，然后在需要时调用它们。

【讨论】：

当我在顶层定义函数时（在 $("#form").submit 之外），它会立即调用，我认为它只是一个定义。当我在表单提交中定义它时，我收到错误“椭圆未定义”。我定义函数的方式是 var draw = function(){ellipse(random(20), random(50), random(10), random(20))};
在p5.js 上阅读更多内容后，您似乎正在混合两个不应该以这种方式混合的库。 p5.js 会在页面加载时查找并调用一些函数。查看此示例以了解如何使用 p5 进行 AJAX：github.com/processing/p5.js/wiki/…
谢谢，这是有道理的。很好的链接。