Ajax发布返回undefined(Ajax post returning undefined)

我试图通过ajax发送帖子中div的值。

具体来说，我正在尝试发送div slick-active中的内容，所以在这个例子中是console.log（data.results）; 会显示4和6

这是html：

这是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

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:

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

最满意答案

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

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

现在，这仍然会返回一个jquery对象列表，你真的不想发送给你的脚本。

就个人而言，我从来没有从元素中获取内部html或文本作为值，如果可以，可以使用data-value添加data-value属性，如：

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

这可以通过使用数组方法map来完成，该map方法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();

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

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:

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!

更多推荐