通过 Ajax 而不是表单提交从“图像”类型的输入提交数据答案

【问题标题】：Submitting data from an input of type "image" via Ajax rather than form submit通过 Ajax 而不是表单提交从“图像”类型的输入提交数据
【发布时间】：2012-10-16 21:23:42
【问题描述】：

基本上，我想使用图像输入，但我不想提交表单来获取结果，我想通过单击图像输入获取 X 和 Y 坐标，然后通过ajax。

现在，我意识到我可以将图像输入以它自己的形式，然后提交到隐藏的 iframe 并在一定间隔内检查结果（我正在为 ajax 上传器执行此操作现在），但它似乎有点做作。 我也意识到我可以通过任何点击通过 javascript 获得我的鼠标位置，这并不是我真正要问的

我可以像这样使用图像类型的输入吗？有没有办法让点击图像输入只是设置它的值然后调用一些 JavaScript 来执行我的 ajax 调用？

【问题讨论】：

标签： jquery ajax html-input

【解决方案1】：

我正在处理我的旧问题，我发现这个问题从未得到充分回答。我不记得我是否在“很久以前”想到了这一点，但我现在知道该怎么做。

只需检查图像输入的点击事件的 offsetX 和 offsetY 即可。它应该偏移到您单击的图像输入。

$('input[type=image]').click(function(e) {
     //alert the clicked position.
     alert(e.offsetX + ',' + e.offsetY);
});

【讨论】：

【解决方案2】：

看这里： http://jsfiddle.net/pfLtm/

如您所见，该代码可以轻松修改为如下内容：

$("#MyInput").click(function(event) {
    var oPos = $(this).position();
    $(this).attr("mouse_x", (event.pageX - oPos.left));
    $(this).attr("mouse_y", (event.pageY - oPos.top));
    return false;
});

这会将点击的 X 和 Y 位置存储为元素本身的属性。测试用例：http://jsfiddle.net/pfLtm/1/

例如，您可以调用 AJAX 调用，而不是返回 false。

【讨论】：