【问题标题】:Why Python django deployment in Heroku not executing ajax?为什么 Heroku 中的 Python django 部署不执行 ajax?
【发布时间】:2021-07-09 23:49:41
【问题描述】:

我正在 Heroku 中部署一个 django 应用程序,其中我有一些要在模板中执行的 ajax。在我的本地机器上一切正常。但是 ajax 部分在 Heroku 中不起作用。我在这里包含一个模板以供参考。在这里,我使用 Skulpt(在浏览器中运行 python 的选项)。如果有人知道如何解决这个问题以及这背后的原因是什么,请帮忙。感谢您的反馈。

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Assessment</title>

    <style>
        .question, .code-area {

            display: table-cell;

        }
        .question {
          width:50%;
          left: 0;
          overflow-y:auto;
          overflow-x: auto;
          background-color: white;

        }
        .code-area {
          border-left: 2px solid navy;
          width:50%;
          right: 0;
          background-color: white;
        }
       
    </style>
    <script src="{% static '/codemirror-5.58.3/lib/codemirror.js' %}"></script>
    <link href="{% static '/codemirror-5.58.3/lib/codemirror.css' %}" rel="stylesheet">
    <link href="{% static '/codemirror-5.58.3/theme/dracula.css' %}" rel="stylesheet">
    <script src="{% static '/codemirror-5.58.3/mode/python/python.js' %}"></script>
    <script src="https://skulpt.org/static/skulpt.min.js" type="text/javascript"></script>
    <script src="https://skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.skulpt.org/js/skulpt.min.js" type="text/javascript"></script>
    <script src="https://www.skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script>


</head>
<body>
<script type="text/javascript">
// output functions are configurable.  This one just appends some text
// to a pre element.

function outf(text) {
    var mypre = document.getElementById("output");
    mypre.innerHTML = mypre.innerHTML + text;
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
<!--   var prog = document.getElementById("editor").value;-->
    var prog = editor.getDoc().getValue("\n")
   console.log(prog);
   var mypre = document.getElementById("output");
   mypre.innerHTML = '';
   Sk.pre = "output";
   Sk.configure({output:outf});
   var myPromise = Sk.misceval.asyncToPromise(function() {
       return Sk.importMainWithBody("<stdin>", false, prog, true);
   });
   myPromise.then(function(mod){
       console.log('success');
   },function(err) {
       console.log(err.toString());
       alert(err.toString());
   });
}
</script>


<div class="container">
    <div class="question">
      <h2><strong>QUESTION</strong></h2>
        <span id="questionText">{{question_to_solve.question | safe}}</span>
    </div>
    <div class="code-area">
        <form id="answer_form" method="post">
        {% csrf_token %}
        <div class="input">
            <textarea rows="30" id="editor" name="code" autofocus>{{question_to_solve.hint | safe}}</textarea></div>

        <br/><br/>
        <button type="button" onclick="runit()">Run</button>
        <input type="submit" value="Submit" class="button">
        </form>
        <br/><br/>
        <div align="left">
        <pre id="output" ></pre>
            {{message}}
            {{output}}
            {{error}}
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).on('submit','#answer_form',function(e){
        e.preventDefault();

        $.ajax({
        type:'POST',
        url:"{%url 'question' question_to_solve.id %}",
        data:{
        code: $('#editor').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        action:'post'

        },
        success:function(json){
<!--            alert(json.message);-->
            $('#output').html(json.message);
        }
        });
    });
</script>
<script>
    // Convert text area to code mirror python editor
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true,
            mode: "python",
            });
</script>
</body>
</html>

【问题讨论】:

    标签: javascript jquery django ajax heroku


    【解决方案1】:

    我怀疑您在 heroku 应用程序上使用 https://。如果您检查浏览器的控制台选项卡,您会看到许多关于阻止 http:// 内容的警告或错误。要解决此问题,请使用 https:// 加载您的静态文件。

        <script src="https://skulpt.org/static/skulpt.min.js" type="text/javascript"></script>
        <script src="https://skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
        <script src="https://www.skulpt.org/js/skulpt.min.js" type="text/javascript"></script>
        <script src="https://www.skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script>
    

    【讨论】:

    • 谢谢。这有助于解决 jquery 问题。但是ajax代码仍然没有执行。
    猜你喜欢
    • 1970-01-01
    • 2017-02-12
    • 2019-03-12
    • 2015-09-29
    • 2021-03-20
    • 2023-04-08
    • 1970-01-01
    • 2014-08-08
    • 2015-09-15
    相关资源
    最近更新 更多