Ajax 帖子返回未定义

Question

我正在尝试通过 ajax 发送帖子中 div 中的值。

具体来说，我正在尝试发送 div slick-active 中的内容，因此在此示例中为 console.log(data.results);将显示 4 和 6

这里是html：

          <div class="slider single-item">
              <div class="slick-slide"><h3>1</h3></div>
              <div class="slick-slide"><h3>2</h3></div>
              <div class="slick-slide"><h3>3</h3></div>
              <div class="slick-slide slick-active"><h3>4</h3></div>
              <div class="slick-slide"><h3>5</h3></div>

          <div class="slider single-item">
              <div class="slick-slide slick-active"><h3>6</h3></div>
              <div class="slick-slide"><h3>7</h3></div>
              <div class="slick-slide"><h3>8</h3></div>
              <div class="slick-slide"><h3>9</h3></div>
              <div class="slick-slide"><h3>10</h3></div>

这里是 ajax/jquery

      $(document).ready(function(){
            $('#submit').on('click', function(e){
                  e.preventDefault(); // preventing default click action

                  $.ajax({
                    url: '/testing',
                    type: 'post',
                    data: JSON.stringify({results: $('#div.slick-active')}),
                      success: function (data) {
                        console.log(data);
                      // ajax success callback
                    }, error: function (response) {
                      alert('ajax failed');
                      // ajax error callback
                    },
                  });
                });

服务器端 Flask 路由

@app.route('/testing', methods=['GET', 'POST'])
def testing():
        r = request.json
        print r
        return "data recived is %s" % r

它将console.log r 返回为None，而应该返回4,6

Answer 1

当您调用：$('#div.slick-active') 时，您正在选择 ID 为 div 且具有类 slick-active 的每个对象，调用将返回 jquery 对象列表，但在您的情况下，没有，因为没有具有div ID 的单个元素。

首先，您希望选择元素而不是 id，选择器看起来像：$('div.slick-active')（没有表示 ID 的 #）。

现在，这仍会返回一个 jquery 对象列表，这是您不想发送到脚本的内容。

就我个人而言，我从不从元素中获取内部 html 或文本作为值，如果可以的话，添加带有项目值的 data-value 属性，例如：

<div class="slick-slide" data-value="1"><h3>1</h3></div>

所以，它仍然是一个 jquery 对象，而您只需要该值。
因此，您需要从返回的列表中的每个对象中获取它。

这可以通过使用数组方法map 来完成，它迭代对象并调用您在每个对象上创建的函数，无论函数返回什么都将在迭代结束时作为数组返回。

这可能看起来像：

$('div.slick-active').map(function($ele) {
    // Here we select the 'data-value' from the object and return it.
    return $ele.data('value'); 
}

现在，这可以在不向 html 中的元素添加 data-value 属性的情况下完成，但是您需要选择元素内 h3 的值，这将使 map 函数的返回看起来像这个：

return $ele.find('h3').text();

但我建议添加 data-value 属性！

Answer 2

成功回调返回来自服务器的响应，而不是您在请求中提供的参数。试试console.log(data) 看看结果如何。它可以是空的。另外，检查返回响应的状态，如果你将发布的数据保存在服务器端，它应该返回 201 Created。

提示：从 jQuery 1.8 开始， .success(..) 和 .error(..) 方法已被弃用。来自 jQuery 文档：

弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 1.8 开始被弃用。准备 您最终删除的代码，请使用 jqXHR.done()、jqXHR.fail()、 和 jqXHR.always() 代替。