I have the following code. These code supposed to get user's input and processed in python. All these are supposed to run in the same webpage.
I have tried all possible function under flask.request
.
Inside the python file,
app.route("/",methods=['GET','POST'])
def homepage():
return render_template('index.html')
@app.route("/detection",methods=['GET'])
def detections():
code=request.args.get('code',default='',type=str)
print(code)
ide=Lang_Dec(code)
lang=ide.get_lang()
print(lang)
return jsonify({'html':lang})
Inside the html file,
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<textarea class="codemirror-textarea" id='code'></textarea>
<button type="button" class="btn btn-primary btn-lg" id='butt'>Guess the function!</button>
</div>
<div class="col-lg-4">
<div class="card" >
<h5 class="card-header">Detected Language</h5>
<div class="card-body">
<h6 class="card-title" id='lang'></h6>
<p class="card-text">Percentages</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" >
<h5 class="card-header">IDE OUTPUT</h5>
<div class="card-body">
<p class="card-text" id='ide'></p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var code = $(".codemirror-textarea")[0];
var editor = CodeMirror.fromTextArea(code, {
lineNumbers : true,
theme : "duotone-dark",
});
});
</script>
<script>
$(document).ready(function(){
$('#butt').click(function(){
var code=$('#code').val();
$.ajax({
url:"/detection",
type: "get",
data:{code:code},
success:function(response){
$('#lang').html(response.html);
},
error: function(xhr){
//do smtg
}
});
});
});
</script>
</body>
The Python is supposed to get the user input from the textarea
, but it turns out that the Python script only getting a -
.
This isn't a Python or Flask issue, you have not wrapped your textarea inside a form, and the CodeMirror Documentation suggests the following (emphasis mine):
CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)
This method provides another way to initialize an editor. It takes a textarea DOM node as first argument and an optional configuration object as second. It will replace the textarea with a CodeMirror instance, and wire up the form of that textarea (if any) to make sure the editor contents are put into the textarea when the form is submitted . The text in the textarea will provide the content for the editor.
Try and confirm this with a simple form:
<form action='detection'>
<textarea id='code' name='code'></textarea>
<button type="submit">Go!</button>
</form>
Serving locally, submitting the form with some random text input yields the following:
127.0.0.1 - - [21/Jan/2019 22:50:04] "GET /detection?code=dfgdfgdfgggggggggg HTTP/1.1"
So in your case, it looks like you need to call cm.save()
prior to your Ajax request, at least that is what a quick glance at the documentation suggests to me.
So a quick and dirty fix to your code would look like this:
<script>
$(document).ready(function(){
var code = document.getElementById('code');
var editor = CodeMirror.fromTextArea(code, {
lineNumbers : true,
theme : "duotone-dark",
});
$('#butt').click(function(){
editor.save(); // this is where the textarea content gets updated
var c=$('#code').val();
$.ajax({
url:"/detection",
type: "get",
data:{code:c},
success:function(response){
$('#lang').html(response.html);
},
error: function(xhr){
//do smtg
}
});
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.