为什么我的POST变量显示在URL字符串上？

Question

我已经基于按钮点击实现了ajax post功能.代码是

$.ajax({
    type: "POST",
    url: "includes/phpscripts?action=manage",
    data: {location: loc, lat: latitude, lon: longitude, heading: head, filename: file},
    success: function(){
      $("#panoInfo").html("<div id='message'></div>");
      $("#message").html("Valid Submission");
  }
});

我指定了POST方法,因为我不想通过URL看到变量.但是,他们是.

我发布之前的测试网址是

http://localhost/JMCTour/buildtour.php

然后

http://localhost/JMCTour/buildtour.php?filename=1-prefix_blended_fused.jpg&location=Start+of+Tour&lat=43.682211&long=-70.450705&heading=100&submit=Save

为什么？

Answer 1

确保您的表单标签有 method='POST'

<form method='POST'>
...
</form>

Answer 2

来自jQuery.ajax的文档（重点是我的）：

数据

要发送到服务器的数据。如果不是字符串，则将其转换为查询字符串。它附加到 GET 请求的 url。请参阅 processData 选项以防止此自动处理。对象必须是键/值对。如果 value 是一个数组，jQuery 会根据传统设置的值（如下所述）使用相同的键序列化多个值。

因此：

processDataBoolean

默认值：真

默认情况下，作为对象传递给 data 选项的数据（从技术上讲，除了字符串之外的任何内容）将被处理并转换为查询字符串，适合默认的内容类型“application/x-www-form-urlencoded” . 如果要发送 DOMDocument 或其他未处理的数据，请将此选项设置为 false。

Answer 3

由于问题中缺乏信息,我在这里做了很多假设.

您的表单很可能看起来像这样:

<form>
    <input type="text" name="lon" />
    <input type="text" name="lat" />
    <input type="text" name="heading" />
    <input type="file" name="image" />

    <input type="button" id="submit" value="Submit" />
</form>

我们马上遇到问题,您的文件输入.无法使用jQuery的ajax方法通过ajax发送文件,而不包括在幕后正确处理它或编写代码而是提交到隐藏的iframe或其他方法(html5？flash？)的其他插件.

忽略文件输入,这是原始问题所在.

$("#submit").click(function(){
    $.ajax(...);
});

我遗漏了ajax选项,因为它们无关紧要.问题是,由于表单中的按钮是表单中的最后一个输入而没有提交按钮,它将像提交按钮一样提交表单,除非您阻止该默认操作.如果您不阻止该默认操作,则表单将以默认类型"GET"提交,因为您未在表单中设置类型.

要阻止click事件的默认操作,请返回false或使用 event.preventDefault()

$("#submit").click(function(event){
    event.preventDefault();
    $.ajax(...);
});

修复文件输入问题可能已在其他几个SO问题中得到解答.