Javascript / jQuery 发布问题答案

【问题标题】：Javascript / jQuery post issueJavascript / jQuery 发布问题
【发布时间】：2014-03-26 04:15:55
【问题描述】：

我编写了一个基于 POST 请求返回数据的 API。

当我使用 HTML 表单时，它可以工作。当我将 wget 与 post-data 一起使用时，它可以工作，但无论我使用什么 javascript 代码，我都无法让它工作。

所以，我使用 Chrome 开发面板，查看网络选项卡，它显示 py 文件响应，它显示正确的响应，只是没有显示在屏幕上。

我以为是标题，所以我的 python (API) 有这个作为标题：

print "Content-Type: text/json"
print "Access-Control-Allow-Origin: *"
print "Access-Control-Allow-Methods: GET, POST, PUT, DELETE"
print "Access-Control-Expose-Headers: Access-Control-Allow-Origin"
print "Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"

Javascript：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("http://www.example.com/cgi-bin/main.py",
    {
      uname:"username",
      pword:"password"
    },
    function(data,status){
      $(".data").html(data);
      $(".status").html(status);
    });
  });
});
</script>
</head>
<body>

<button>Send</button>
<p>Data: <span class="data"></span></p>
<p>Status: <span class="status"></span></p>

</body>
</html>

【问题讨论】：

检查您的浏览器控制台是否有任何错误
"event.returnValue 已弃用。请改用标准 event.preventDefault()。" 但这不应该影响它
点击处理程序是否被调用？单击按钮后控制台中是否有任何其他日志
是的，上面的错误是我点击时发生的。在此之前，日志中没有任何内容。注意：永远不会打开警报框

标签： javascript jquery python api

【解决方案1】：

发现了这个问题。

我提到我使用Python创建API，发送数据时，我只是做了“打印dictobject”，问题是，它需要先转换为JSON！

因此，当 javascript 得到它时，它会尝试解析 JSON（就像在我的标头中一样），因此无法返回任何内容。

我通过将 dataType: "text" 放在 ajax 调用中发现了这个问题，这禁用了 javascripts 解析器。当数据（最终）打印出来时，我复制了文本，并使用 json 验证器确定它不正确！

最终的javascript代码：

var formData = {uname:"username",pword:"password"};

$.ajax({
    url : "http://be.expressivecomputing.com/cgi-bin/main.py",
    type: "POST",
    data : formData,
    dataType: 'text',
    success: function(data, textStatus, jqXHR)
    {
        $(".data").html(data);
        $(".status").html(textStatus);
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        $(".data").html("FAIL");
        $(".status").html(textStatus);
    }
});

【讨论】：