p5.js 功能无法正常工作 ajax 成功

Question

我正在尝试将 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>

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

Answer 1

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

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

p5.js 功能无法正常工作 ajax 成功

p5.js functions not working on ajax success

json

ajax

django

processing

p5.js