Json p5.js函数不适用于ajax成功_Json_Ajax_Django_Processing_P5.js

Json p5.js函数不适用于ajax成功

json ajax django processing

Json p5.js函数不适用于ajax成功,json,ajax,django,processing,p5.js,Json,Ajax,Django,Processing,P5.js,我正在尝试将一个p5.js集成到一个网页中，在收到一个成功的响应后使用它。我想根据用户输入的信息绘制一棵树，该信息将成为某个节点。我正在使用Django作为后端 views.py def index(request): if request.method != 'POST': return render(request, 'index.html') else: if request.is_ajax(): parent = r

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


{%csrf_令牌%}
$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
// ... 
$.ajax({
url:window.location.href，
类型：“POST”，
数据：{csrfmiddlewaretoken:csrftoken，
孩子：孩子，
家长：家长，
},
成功：函数（json）{
如果（json[“叶子文本”]）{
log（检索到json['leaf_text']+”）；
函数设置（）{
}
函数绘图（）{
椭圆（随机（20）、随机（50）、随机（10）、随机（20））；
}
}
},
错误：函数（xhr、errmsg、err）{
log（xhr.status+“：”+xhr.responseText）；
},
}); 
});

我的控制台测试成功了。我不明白为什么“success”中接下来的几个函数没有起到任何作用。我在firebug中没有收到任何错误消息。

我是p5新手，但我不认为这部分代码是问题所在，因为我就是这个示例：

您的根本问题是，虽然定义了函数

setup（）

和

draw（）

，但从未调用它们

一个更基本的问题是在

if

语句中定义函数。虽然Javascript允许这样做，但这是一种非常糟糕的做法。您通常会在顶层或对象层定义

setup（）

和

draw（）

，然后在需要时调用它们。

您的根本问题是，虽然定义了

setup（）

和

draw（）

函数，但从未调用它们

一个更基本的问题是在

if

语句中定义函数。虽然Javascript允许这样做，但这是一种非常糟糕的做法。您通常会在顶层或对象层定义

setup（）

和

draw（）

，然后在需要时调用它们。

您的语法没有任何意义。为什么要在success函数中声明

setup（）

函数？为什么

draw（）

函数在

setup（）

函数中？@KevinWorkman draw函数不在setup（）函数中。我只是选择了这个作为一个例子，因为它在官方网站上，我相信设置功能可以省略。这都是“success”的内部内容，因为我想使用ajax在表单提交的基础上进行绘制。好的，我现在看到了

setup（）

函数的右括号-如果格式正确，阅读起来会容易得多！但是你的语法仍然没有意义。为什么要在if语句中定义函数？您希望什么时候调用这些函数？@KevinWorkman我想根据json对象中的不同键绘制不同的形状。例如，我的后端可能会发送细枝、分支或主干规范—if语句需要区分这些规范。您的语法没有多大意义。为什么要在success函数中声明

setup（）

函数？为什么

draw（）

函数在

setup（）

setup（）

函数的右括号-如果格式正确，阅读起来会容易得多！但是你的语法仍然没有意义。为什么要在if语句中定义函数？您希望什么时候调用这些函数？@KevinWorkman我想根据json对象中的不同键绘制不同的形状。例如，我的后端可能会发送twig、branch或trunk规范—if语句需要区分这些规范。当我在顶层（在$（“#form”）.submit之外）定义函数时，它会立即调用，我认为这只是一个定义。当我在表单submit中定义它时，我会得到错误“ellipse未定义”。我定义函数的方式是var draw=function（）{eliple（random（20）、random（50）、random（10）、random（20））}；在阅读了更多关于

p5.js

的内容后，看起来您正在混合两个不应该以这种方式混合的库。当页面加载时，p5.js将查找并调用一些函数。看看这个例子，看看如何使用p5实现AJAX：谢谢，这很有意义。很好的链接。当我在顶层（在$（“#form”）.submit之外）定义函数时，它会立即调用，我认为这只是一个定义。当我在表单submit中定义它时，我会得到错误“ellipse未定义”。我定义函数的方式是var draw=function（）{eliple（random（20）、random（50）、random（10）、random（20））}；在阅读了更多关于

p5.js

的内容后，看起来您正在混合两个不应该以这种方式混合的库。当页面加载时，p5.js将查找并调用一些函数。看看这个例子，看看如何使用p5实现AJAX：谢谢，这很有意义。很好的链接。