关于Ajax中$(this)特别的地方

直接开头说重点：Ajax回调函数里的$(this)并不再是指代之前的DOM元素

写网页 想通过ajax改一个含有el表达式的标签

1. 网页Ajax部分：

<tr>
            <td>${status.count}</td>
            <td>${carting.bookBean.name}</td>
            <td><img src="${pageContext.request.contextPath}/${carting.bookBean.img}" style="width:75px;"></td>
            <td>${carting.bookBean.originalPrice}</td>
            <td>${carting.price}</td>
            <td class="num">${carting.num}</td>
            <td class="update">
                <button>+1</button>
            </td>
            <td></td>
        </tr>
        <script type="text/javascript">         /*click action   Ajax*/
        $(window).on("load", function () {
            $(".update button").click(function () {
                /*$.get("{pageContext.request.contextPath}/afterLogin/updateCarting",
                    {
                        "count": $(this).parent().parent().children().eq(0).text()
                    },
                    function (data) {
                        $(this).parent().parent().children().eq(5).text(data);
                    });*/
                $.ajax({
                    type: "get",
                    url: "${pageContext.request.contextPath}/afterLogin/updateCarting",
                    data: {"count": $(this).parent().parent().children().eq(0).text()},
                    dataType: "text",
                    success: function (data) {
                        $(this).parent().parent().children().eq(5).text(data);
                        console.log("num:" + $(this).parent().parent().children().eq(5).text());
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                        alert(errorThrown);
                    }
                });
                console.log("uid:" + $(this).parent().parent().children().eq(0).text());
                console.log("num:" + $(this).parent().parent().children().eq(5).text());
            });
        });
        </script>

Servlet中用的是通过response PrintWriter来输出

结果网页上数字并没有改变

但因为看到浏览器工具里response里已经有改变后的数据 可以知道回调函数进了success里 并且data是预期的值

之后通过群里大佬们的帮助以及网上查找 确认了el表达式和前端页面没关系 就把jsp中的jquery部分写入html中尝试

<table>
    <tr id="thead">
        <th>序号</th>
        <th>商品名</th>
        <th>封面</th>
        <th>市场价</th>
        <th>当当价</th>
        <th>数量</th>
        <th>变更数量</th>
        <th>删除</th>
    </tr>
    <tr>
        <td>count</td>
        <td>name</td>
        <td>image</td>
        <td>carting.bookBean.originalPrice</td>
        <td>3333333</td>
        <td>1</td>
        <td class="update">
            <button>+1</button>
        </td>
        <td></td>
    </tr>
    <script type="text/javascript">         /*click action   Ajax*/
    $(window).on("load", function () {
        $(".update button").click(function () {
            console.log("num:" + $(this).parent().parent().children().eq(5).text());
            var num = $(this).parent().parent().children().eq(5).text();
            num++;
            $(this).parent().parent().children().eq(5).text(num);
            console.log("uid:" + $(this).parent().parent().children().eq(0).text());
            console.log("num:" + $(this).parent().parent().children().eq(5).text());
            console.log("----------------------------------------------")
        });
    });
    </script>
</table>

试了下html里正常 点击按键后num中的数字会不断+1

（这里已经开始表现出不对劲了 结果还是没想通）

听群里大佬们的话把jquery里选择器换成直接选择再试一下

就改成了

$(".num").text(data);

结果数字终于会跳了。。。。基本可以认定是$(this)的问题了。。。

再试一下

var str = $(this).html();
console.log("ajax this: " + str);

直接报错

jquery-3.2.1.min.js:3 Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

好了 就是$(this)的锅了  没得甩

【重点】查了一下W3School ：（附链接）

context

类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

《论仔细看完文档的重要性》这个教训简直了。。。我一下午的时间啊。。。

不过也算是第一次用上了浏览器的 Network功能[捂脸.jpg]

就这样

===分割线===

想起来忘了解决方法：

var here = $(this);

直接赋值给个变量就可以拿着变量到处当$(this)用了。。。emmmm