Javascript 通过AJAX发送动态绘制框的坐标

我正在拍摄图像，保存第一次单击的坐标，根据这些坐标绘制一个框，然后保存最终坐标。我尝试使用

console.log（）

输出坐标，它跟踪正确的坐标。问题是它没有正确地发布它

$(document).ready(function () {
    var $selection = $('<div>').addClass('selection-box');
    var firstClick = true;
    $('#image')
    .data("vals", {xstart: 0, ystart:0})
    .on('dragstart', function(e) { event.preventDefault(); })
    .mousedown(function(e) {
        var xval = Number(e.pageX - $(this).offset().left);
        var yval = Number(e.pageY - $(this).offset().top);
        console.log(xval)
        $("#image").data("vals").xstart = e.pageX - $(this).offset().left;
        $("#image").data("vals").ystart = e.pageY - $(this).offset().top;
        $selection.css({
            'top': yval,
            'left': xval,
            'width': 0,
            'height': 0
        });
        $selection.appendTo($('#image'));
        $('#image').mousemove(function(e) {
            var move_x = e.pageX - $(this).offset().left,
                move_y = e.pageY - $(this).offset().top,
                width  = Math.abs(move_x - xval),
                height = Math.abs(move_y - yval),
                new_x, new_y;
            console.log(xval)

            new_x = (move_x < xval) ? (xval - width) : xval;
            new_y = (move_y < yval) ? (yval - height) : yval;    
            $selection.css({
                'width': width,
                'height': height,
                'top': new_y,
                'left': new_x
            });
        }).mouseup(function(e) {
            xend = Number(e.pageX - $(this).offset().left);
            yend= Number(e.pageY - $(this).offset().top);
            //console.log(xval, yval, xend, yend);
            $.ajax({
                 url: '/view/getwords/',
                 type:"POST",
                 data: {
                     xval: xval.toString(),
                     yval: yval.toString(),
                     xend: xend.toString(),
                     yend: yend.toString(),
                 },
                 dataType: 'json',
                 success: function (data) {
                    console.log(xval, yval, xend, yend);
                 },
                 error:function(){
                     alert("Error");
                 }
             });
            $('#image').off('mousemove')
            $selection.remove();
        })
    })
});

$（文档）.ready（函数（）{
var$selection=$（''）.addClass（'selection-box'）；
var firstClick=true；
$（“#图像”）
.data（“VAL”{xstart:0，ystart:0}）
.on（'dragstart'，函数（e）{event.preventDefault（）；}）
.mousedown（函数（e）{
var xval=Number（e.pageX-$（this.offset（）.left）；
var yval=数字（e.pageY-$（this.offset（）.top）；
console.log（xval）
$（“#image”）.data（“vals”）.xstart=e.pageX-$（this）.offset（）.left；
$（“#image”）.data（“vals”）.ystart=e.pageY-$（this）.offset（）.top；
$selection.css({
“顶”：伊瓦尔，
“左”：xval，
“宽度”：0，
“高度”：0
});
$selection.appendTo（$（'#image'））；
$（'#image'）.mousemove（函数（e）{
var move_x=e.pageX-$（this）.offset（）左，
move_y=e.pageY-$（this）.offset（）.top，
宽度=Math.abs（移动x-xval），
高度=数学绝对值（移动y-yval），
新x，新y；
console.log（xval）
new_x=（move_x

另外，这是我关于StackOverflow的第一个问题，如果我能提出更好的问题，请告诉我

谢谢大家!

编辑：下面是我使用的装箱代码片段。

---

本质上，我只是想发布上面代码片段中的坐标。

当您发布时会发生什么？您在

success

功能中完成了

console.log（data）

了吗？@RoryMcCrossan好的，谢谢。mouseup函数位于mousedown函数的内部。通过复制粘贴，代码的格式可能已更改。将立即修复。@AnuragSrivastava不会发生任何事情，因为它从未进入该函数。该错误意味着请求是用正确的数据发送的，问题出在服务器端代码上。JS很好，这正是我的意思。每次发生

mousedown

时，您都要添加一个新的

mouseup

事件处理程序，但从未将其删除。因此，在第三个选择中，将使用相同的数据发出3个AJAX请求。这是个问题，但不是主要问题。如上所述，问题在于服务器如何接收您发送的数据。您需要调试它。当您发布<代码>时会发生什么？您在

success

功能中完成了

console.log（data）

了吗？@RoryMcCrossan好的，谢谢。mouseup函数位于mousedown函数的内部。通过复制粘贴，代码的格式可能已更改。将立即修复。@AnuragSrivastava不会发生任何事情，因为它从未进入该函数。该错误意味着请求是用正确的数据发送的，问题出在服务器端代码上。JS很好，这正是我的意思。每次发生

mousedown

时，您都要添加一个新的

mouseup

事件处理程序，但从未将其删除。因此，在第三个选择中，将使用相同的数据发出3个AJAX请求。这是个问题，但不是主要问题。如上所述，问题在于服务器如何接收您发送的数据。你需要调试它。