Ajax发布返回undefined

时间:2015-06-07 07:31:39

标签: javascript jquery ajax flask

我试图通过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

2 个答案:

答案 0 :(得分:2)

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()相反。

答案 1 :(得分: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();

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