Ajax发布返回未定义

I am trying to send the value of what is in the div's on the post via ajax.

Specifically I'm trying to send what is in the div slick-active, so in this example console.log(data.results); would show 4 and 6

Here is the 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>

Here is the 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 route

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

Which returns console.log r as None, which should instead return 4,6

Succes callback returns the response from server, not the parameters that you provide on the request. Try just console.log(data) and see what the result is. It can be empty. Additionally, check the status of the returned response, if you save posted data on the server side, it should return 201 Created.

Just a hint: from jQuery 1.8 the .success(..) and .error(..) methods are deprecated. From jQuery documentation:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

When you call: $('#div.slick-active') you are selecting each object with the ID div that has the class slick-active, the call will return a list of jquery objects, but in your case, none, due to not having a single element with the div ID.

So to start, you wish to select on element instead of id, the selector would look something like: $('div.slick-active') (without the # which indicates ID).

Now, this will still return a list of jquery objects, something you don't really want to send to your script.

Personally, I never fetch the inner-html or text from a element as a value, if you can, add a data-value attribute with the value of the item, like:

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

So, its still a jquery object, and you only want the value.
So, you need to fetch it from each of the objects in the list that is returned.

This can be done by using the array method map, which iterates the objects and calls a function you create on each, whatever the function returns will be returned as an array at the end of the iteration.

This could look something like:

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

Now, this can be done without adding the data-value attribute to the elements in the html, but then you need to select the value of the h3 inside the element, which would make the return from the map function look something like this:

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

But I would recommend adding the data-value attribute!