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

发布于 2024-10-09 03:57:18 字数 306 浏览 1 评论 0原文

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

现在，我意识到我可以将图像输入放入其自己的表单中，然后提交到隐藏的 iframe 并按时间间隔检查结果（我现在正在为 ajax 上传器执行此操作），不过好像有点做作。 我还意识到我可以通过 JavaScript 从任何点击中获取鼠标位置，这并不是我真正要问的

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-10-16 03:57:18

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

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

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

I was going through my old questions and I saw that this one was never answered adequately. I don't remember if I figured this out "way back when", but I do know how to do it now.

Just check the offsetX and offsetY of the click event of an image input. It should be offset to the image input you clicked on.

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

回复收藏 0 原文

仙女山的月亮 2024-10-16 03:57:18

看看这里：
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/

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

Take a look here:
http://jsfiddle.net/pfLtm/

As you see, that code can be easily modified to something like this:

$("#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;
});

This will store the X and Y position of the click as attributes of the element itself.
Test case: http://jsfiddle.net/pfLtm/1/

Instead of returning false you can invoke the AJAX call for example.

回复收藏 0 原文

~没有更多了~