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

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

只是一个提示：从jQuery 1.8开始，不推荐使用.success（..）和.error（..）方法。来自jQuery文档：

弃用通知：jqXHR.success（），jqXHR.error（）和从jQuery 1.8开始，不推荐使用jqXHR.complete（）回调函数。准备你的代码最终删除，使用jqXHR.done（），jqXHR.fail（），和jqXHR.always（）相反。

Answer 2

当您致电：$('#div.slick-active')时，您正在选择具有类div的ID为slick-active的每个对象，该调用将返回一个jquery对象列表，但在您的情况下， none，由于没有带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中的元素的情况下完成，但是您需要在元素内选择h3的值，这将使得从map函数返回看起来像这样：

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

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

Ajax发布返回undefined

2 个答案: