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

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

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

<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问题中得到解答。

Answer 3

来自docs for jQuery.ajax（强调我的）：

数据

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

因此：


<强> processDataBoolean

默认值：true

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

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

3 个答案: