将ajax数据项传递给函数
Passing ajax data item to the function
我有ajax函数如下,我想发送项目到查找函数
$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
async: false,
success: function (data) {
$.each(data.d.results, function (i, item) {
html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To[city] + '" /><br>';
html += '<div class="blockCol1 greyLabel">' + item.To[city] + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>';
html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>';
html += '<div class="btnHolder"><input name="button" type="button" onclick="javascript:Find(' + item + ')" class="searchBtn wth150" h ref"#" value="Book now" /></div></div>';
});
$("#dvPromotion").empty();
$("#dvPromotion").html(html);
}
});
My find function
function Find(item) {
console.dir(item)
}
但是它不工作,谁能指导我一下
我的JSON
{"results":[{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","etag":"'"4'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"dffa96c4-1b04-419a-991c-0913640152c4","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4302885c-0545-4cbf-9771-8cea409b4d98","type":"SP.Data.StationsListItem"},"Title":"Abu Dhabi"},"Title":"abuDhabi.jpg","Class":"economy","Trip":"RT","Cost":"60"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","etag":"'"5'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"f57e53d4-d576-4be7-a141-2357c4287013","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"383e7bfd-cf17-4fc4-b115-03ceaeb71db9","type":"SP.Data.StationsListItem"},"Title":"Bangalore"},"Title":"banglore.jpg","Class":"economy","Trip":"RT","Cost":"99"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","etag":"'"5'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"09ab5da0-8c92-437c-974d-111f31f9cb51","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"24a99e65-fef4-452d-9879-9110b4b2e1bf","type":"SP.Data.StationsListItem"},"Title":"Beirut"},"Title":"beirut.jpg","Class":"economy","Trip":"RT","Cost":"56"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","etag":"'"5'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"8c9fb3d0-1f9e-44c7-9921-bb5fa63a929f","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"efb0db77-3dfd-42d7-9bb5-3b9733ac68be","type":"SP.Data.StationsListItem"},"Title":"Cairo"},"Title":"cairo.jpg","Class":"economy","Trip":"RT","Cost":"79"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","etag":"'"5'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"70a824cc-a12f-4d6f-ba58-7f67a9ac439b","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4bcb5bd1-e49e-430d-9091-5edda2d6ccbc","type":"SP.Data.StationsListItem"},"Title":"Colombo"},"Title":"colombo.jpg","Class":"economy","Trip":"RT","Cost":"92"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","etag":"'"5'"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"48314626-626e-433d-bea2-bb404b525629","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"77511f79-1dd1-466c-a66c-06a4c3bd6946","type":"SP.Data.StationsListItem"},"Title":"Delhi"},"Title":"delhi.jpg","Class":"economy","Trip":"RT","Cost":"88"}]}
这种方法可以在对现有代码进行最小更改的情况下工作。基本上它将涉及两件事:
-
将自定义数据属性附加到动态生成的按钮Ref: http://html5doctor.com/html5-custom-data-attributes/
-
将事件处理程序附加到按钮的父元素,并使用按钮类名作为选择器上下文Ref: http://api.jquery.com/on/
请参阅https://jsfiddle.net/y0bafvvt/
$.ajax({
url: 'https://api.myjson.com/bins/1mkxw',
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
async: false,
success: function (data) {
let html;
$.each(data.results, function (i, item) {
html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>';
html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>';
html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>';
html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>';
});
$("#dvPromotion").empty();
$("#dvPromotion").html(html);
}
});
// Attach an event listener to the document element (or any other parent element of your buttons)
$(document).on('click', '.btn-finder', function() {
console.dir(JSON.parse(decodeURIComponent($(this).data('item'))));
});
我建议你使用jQuery方法创建HTML,使用这个方法,你可以使用.data(key, value)
存储任意数据与元素,将存储在内部缓存
在动态生成元素时,使用.on()委托事件方法使用事件委托。在事件处理程序中,您可以使用.data(key)
$.ajax({
url: url,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
async: false,
success: function(data) {
$("#dvPromotion").empty();
$.each(data.d.results, function(i, item) {
var div = $('<div />', {
"class": "tileBlock"
}).append($('<img />', {
src: "/PublishingImages/" + item.Title,
alt: item.To[city]
}))
.append($('<br />'));
//Other elements
var input = $('<input />', {
name: "button",
type: "button",
class: "searchBtn wth150",
value: "Book now"
})
input.data('item', item);
div.append(input);
$("#dvPromotion").append(div);
});
}
});
//Bind event handler
$("#dvPromotion").on('click', '.searchBtn', function() {
var iten = $(this).data('item');
})
您的代码中有一些错误,例如item.To[city]
应该是item.To.Title
, data.d.results
应该是data.results
。纠正他们。
同样的问题,为什么你得到错误SyntaxError: missing ] after element list
是因为Find([object Object])
是无效的语法。
所以你可以用javascript:Find(" + item.From.Title + ")
代替javascript:Find(" + item + ")
。
一个JSFIDDLE,以及你可以从这里运行它的代码:
var html = '';
$.ajax({
url: 'https://api.myjson.com/bins/1mkxw',
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
async: false,
success: function (data) {
$.each(data.results, function (i, item) {
html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>';
html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>';
html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>';
html += "<div class='btnHolder'><input name='button' type='button' onclick='javascript:Find(" + item + ")' class='searchBtn wth150' href='#' value='Book now' /></div></div>";
});
$("#dvPromotion").empty();
$("#dvPromotion").html(html);
}
});
function Find(item) {
console.dir(item)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dvPromotion'>
</div>
相关文章:
- 通过Ajax将JavaScript函数传递给PHP文件
- jQuery成功函数中的ajax成功函数
- 访问$.ajax()函数中的两个不同数组
- 使用ajax用jquery调用php函数
- 执行ajax成功函数-jQUERY
- javascript未捕获类型错误函数ajax
- 无法调用函数 /AJAX 相关
- Javascript 回调函数 + AJAX.done.
- jQuery在函数AJAX函数内部的全局变量有问题
- Getting TypeError:$.ajax(..).done不是函数[ajax,Jquery]
- jQuery中的调用函数ajax成功响应工作一次,而不是两次
- 传递参数给函数(ajax, javascript, jquery)
- 在每个循环中运行一个函数(ajax.response)
- 运行jQuery函数.Ajax等待响应的时间足够长
- 从表单调用同一页面内的JS函数(AJAX)
- Javascript函数AJAX调用返回未定义
- 如何使javascript变量全局,并将其传递到函数ajax
- 喜欢不喜欢函数AJAX
- 从函数 Ajax 返回
- JQuery等待任何函数完成后再启动另一个函数——ajax、动画和音频