我试图通过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
答案 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();
但我建议添加数据值属性!