ajax将参数传递给python脚本

时间:2016-05-07 14:52:13

标签: javascript python ajax

我有这个python CGI脚本,我使用以下命令启动并运行:

python3 -m http.server --cgi 8000

python脚本的重要部分是:

parameter = cgi.FieldStorage()
artiest = parameter.getvalue("artiest")
rijen_aantal = parameter.getvalue("rijen")
kolommen_aantal = parameter.getvalue("kolommen")

现在我想做的是在我的html / javascript中我想将表格中的值传递给我的cgi脚本。

在html中,我使用bootstrap编写了以下表单:

<form class="form-inline" role="form" method="POST" action="cgi-bin/schuifpuzzel.py">
<div class="form-group">
    <label for="artiest">Artiest:</label>
    <input type="text" class="form-control margin-right" id="artiest">
</div>
<div class="form-group">
    <label for="rij">Rijen:</label>
    <input type="number" class="form-control margin-right" id="rij">
</div>
<div class="form-group">
    <label for="kolom">Kolommen:</label>
    <input type="number" class="form-control margin-right" id="kolom">
</div>
<button type="submit" class="btn btn-default">Submit</button>

在javascript中,我编写了以下代码,我在html标题中调用。

$(function () {

var artiest = document.getElementById("myForm").elements[0].value;
var rijen = document.getElementById("myForm").elements[1].value;
var kolommen = document.getElementById("myForm").elements[2].value;
$.ajax({
    url: 'cgi-bin/schuifpuzzel.py',
    type: 'post',
    datatype: "json",
    data: JSON.stringify({'artiest': artiest, "rijen": rijen, "kolommen": kolommen}),
    success: function(response) {
        alert(response);
    }
})

});

但这是出于某种原因无效。它只是下载.py。

我在这里做错了什么?

更新:

新问题。我认为发布问题有点解决了。

但后来我遇到了以下错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource

我已经通过使用yoshyosh发布的解决方案解决了这个问题 post

但是现在由于某种原因我收到了这个错误: enter image description here

我不确定为什么因为我的脚本的路径是正确的?

enter image description here

1 个答案:

答案 0 :(得分:1)

在表单上使用.serialize()将数据作为formdata发送,而不是以JSON格式发送。

$.ajax({
    ...
    data: $('.form-inline').serialize(),
    ...
})