javascript - Ajax post 返回 undefined

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
                    },
                  });
                });

Serverside 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 对象列表，这是您不想发送到脚本的内容。

就个人而言，我从不从元素中获取 inner-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();

但我建议添加数据值属性!