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>

我的控制台测试成功。我无法弄清楚为什么接下来的几个功能成功了？没有做任何事情。我没有在firebug中收到任何错误消息。我是p5的新用户，但我不认为代码的一部分就是问题所在：http://p5js.org/get-started/

Answer 1

你的根本问题是，虽然定义了函数private JToken convertTokenToArray(JToken aToken) { JArray arr = new JArray(); List<string> items = JsonConvert.DeserializeObject<List<string>>(aToken.ToString()); foreach (var item in items) { JToken i = item; arr.Add(i); } return arr; }和setup()，但它们永远不会被调用。

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

p5.js功能无法成功实现ajax

1 个答案:

p5.j​​s功能无法成功实现ajax

1 个答案:

p5.js功能无法成功实现ajax