您好我是jquery的新手，我是一个api，我需要从中获取图像并在同一个div中显示其名称 i am getting it like this i want the bike image and name in same div (like this http://www.metrobikes.in/booking/choose-models?start_date=24+Oct+2017&start_time=16%3A00&end_date=25+Oct+2017&end_time=13%3A00&city_id=1&_token=et3dhAZdro5jCyGeD2z6oHUi4BvMZwI15gBVgHiY)
运行＆＃34; chrome.exe --user-data-dir =＆＃34; C：/ Chrome开发者会话＆＃34; - 禁用网络的安全＆＃34;
///////////////////////////////ASDF///////////////////////////////////
$("#btnAjaxCall").click(function(){
fetchDataAndDisplay();
});
$('#selet-city').on('change', function() {
fetchDataAndDisplay($('#selet-city option:selected').val());
});
function fetchDataAndDisplay(id){
$.ajax({
url:'http://metrobikes.in/api/cities/'+id+'/models',
/*url:"https://jsonplaceholder.typicode.com/posts",*/
method:"GET"
}).done(function(data){
for (var i=0; i<data.result.data.length; i++){
console.log(data.result.data[i].image.full);
$(".col-xs-8").append('<div class="selected-bike-s1">' + data.result.data[i].name + '<div/>');
$(".bb-img .bike-imgs").append('<img style="width: 100%;" src="'+data.result.data[i].image.full+'" />');
/*$("#image_from_url").prepend('<div class="selected-bike-s1">' + data.result.data[i].name + '<div/>')*/
};
});
};.date-time-wrap{margin-top: 10px;}
.selected-bike{font-weight: bold;
font-size: 16px;}
.selected-bike-s1{font-weight: bold;
font-size: 16px; }
.bike-price-s1{font-size: 12px; color:grey;}
.wrap-s1{margin-top: 10px;}
.wrap-s1 img{margin-top: 5px; margin-bottom: 5px;}
.min-bill-s2{font-size: 12px; color:grey;}
.s2-book-btn{ background: black;
text-align: center;
color: #ffffff;
font-size: 28px;
font-weight: bold;
margin-top: 15px;
width: 100%;
display: block;
}
.proceed-s4{ float: right;
background: black;
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 11px 26px;}
.booked-bike-s4{font-size: 12px; color:grey;}
.booked-bike-price-s4{font-size: 16px; font-weight: bold;}
.book-btn-wrap{background: #bbbbbb;
padding: 25px 15px;margin-top: 10px;}
.back-slide{ font-size: 24px;}
.bike-brand{font-weight: bold; font-size: 12px; text-align: center;margin-top: 10px; margin-bottom: 15px;}
.con-add-cmnts{margin-top: 10px;}
.con-wallet-wrap{margin-bottom: 10px;}
.promo-apply-btn{background: black;
color: white;
text-align: center;
border-radius: 10px;
/* overflow: hidden; */
padding: 4px 10px;}
.confirm-bike-price{margin-top: 10px; margin-bottom: 10px;}
.con-location{ margin-bottom: 10px;}
.con-name-price-wrap{margin-bottom: 10px;}
.if-city-select{margin-bottom: 10px;}
.p3form{margin-top: 15px;}
.back-summary{ font-size: 22px;
margin-top: 20px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
<style>
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<!-- <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-md-12 col-xs-12 date-time-wrap">
<input type="button" id="btnAjaxCall" value="Ajax Call" />
<div class="row">
<div class="col-md-12 if-city-select">
<select class="form-control" id="selet-city" >
<option selected disabled>Please select a City</option>
<option vlaue="city-1">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-xs-6">
<input type="text" placeholder="Start date and time" value="" class="form-control" id="startdatetimepicker"/>
</div>
<div class="col-xs-6">
<input type="text" placeholder="End date and time" value="" class="form-control" id="enddatetimepicker"/>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 wrap-s1" data-target="#myCarousel" data-slide-to="1">
<div class="row">
<div class="bb-img" id="image_from_url">
<div class="bike-imgs">
</div>
<div class="qwer col-md-8 col-sm-8 col-xs-8">
<div class="selected-bike-s1">Dio</div>
<div class="bike-price-s1">Bike price</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 bike-price-s1">
jaynagr
</div>
<div class="col-md-12 col-sm-12 col-xs-12 bike-price-s1">
MINIMUM BILLIN
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="back-slide" data-target="#myCarousel" data-slide-to="0"> <span class="glyphicon glyphicon-chevron-left"></span> </div>
<img src="http://www.metrobikes.in/img/bikes_upload/thumbnail/Honda-Dio-10.png" class="img-responsive">
<div class="bike-brand">
HONDA
</div>
<div class="selected-bike text-center">
Dio
</div>
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option selected disabled>Please select an area</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
<div class="min-bill-s2">
Minimum billing of 1 hour on weedays and 24 hours on weekends
</div>
<div class="min-bill-s2">
Rs <span>40</span>/hour and <span>750</span>/day
</div>
<a href="#" class="s2-book-btn" data-target="#myCarousel" data-slide-to="2">
Book Now
</a>
</div>
</div>
<div class="item">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="text-center" > <span class="res-back pull-left glyphicon glyphicon-chevron-left" data-target="#myCarousel" data-slide-to="1"></span>
<span style="margin-right: 5%;">Reserve your </span> </h4>
<h3 class="text-center"> <span>Dio</span> TODAY</h3>
<form class="p3form">
<div class="form-group ">
<div class="col-12">
<input class="form-control" type="text" placeholder="Name">
</div>
</div>
<div class="form-group ">
<div class="col-12">
<input class="form-control" type="email" placeholder="Email">
</div>
</div>
<div class="form-group ">
<div class="col-12">
<input class="form-control" type="text" placeholder="Phome number">
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input type="text" placeholder="Start date and time" value="" class="p3-time form-control" id="startdatetimepickerp3" style=" width: 97%;"/>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input type="text" placeholder="End date and time" value="" class="p3-time form-control" id="enddatetimepickerp3"/>
</div>
</div>
</form>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- <div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>-->
</div>
<div class="col-md-12 col-sm-12 col-xs-12 book-btn-wrap">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="booked-bike-s4">
Dio
</div>
<div class="booked-bike-price-s4">
Rs.400/-
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<a class="proceed-s4" href="#" data-target="#myCarousel" data-slide-to="3"> PROCEED</a>
</div>
</div>
</div>
</div>
<div class="item">
<p>TERMS AND CONDITIONS</p>
<div class="col-md-12 col-sm-12 col-xs-12 book-btn-wrap">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="booked-bike-s4">
Dio
</div>
<div class="booked-bike-price-s4">
Rs.400/-
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<a class="proceed-s4" href="#" data-target="#myCarousel" data-slide-to="4"> BOOK NOW</a>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-2">
<span class="back-summary glyphicon glyphicon-chevron-left" data-target="#myCarousel" data-slide-to="3"></span>
</div>
<div class="col-xs-10">
<h2 class="text-center"> SUMMARY </h2>
</div>
</div>
</div>
<img src="http://www.metrobikes.in/img/bikes_upload/thumbnail/Honda-Dio-10.png" class="img-responsive">
<div class="col-md-12 col-sm-12 col-xs-12 con-name-price-wrap">
<div class="row">
<div class="col-md-6 col-xs-6 confirm-bike-name">
DIO
</div>
<div class="col-md-6 cl-xs-6 text-right sconfirm-bike-price">
Rs 400/-
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 con-location">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2 con-label">
<strong>FROM</strong>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 con-from" >
<div class="row">
FROM DATE AND TIME
</div>
</div>
<div class="col-md-2 col-sm-2 col-xs-2 con-to">
<strong>TO</strong>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 con-to" >
TO DATE AND TIME
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 con-pick-location">
<div class="row">
<div class="col-md-4 col-xs-4 con-pikloc-title">
<strong>PICK UP LOCATION</strong>
</div>
<div class="col-md-8 col-xs-8 con-pikloc-loc">
Location
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 con-promo-wrap">
<div class="row">
<div class="col-md-12 col-xs-12">
<h4>PROMO CODE</h4>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Enter promo code">
</div>
<div class="col-xs-3">
<div class="promo-apply-btn">
Apply
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<h4>BALANCE</h4>
</div>
<div class="col-md-12 col-xs-12 con-wallet-wrap">
<div class="row">
<div class="col-xs-9">
AVAILAL AMOUNT
</div>
<div class="col-xs-3">
6
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 con-redeem-amt-wrap">
<div class="row">
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Enter redeem amount here">
</div>
<div class="col-xs-3 ">
<div class="promo-apply-btn">
Redeem
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 con-add-cmnts">
<input type="text" class="form-control" placeholder="Additional comments">
</div>
<div class="col-md-12 col-xs-12 con-chk">
<div class="checkbox">
<label><input type="checkbox" value="">I am over 18</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">I have a valid driving license and required documents</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">I agree to <a data-target="#myCarousel" data-slide-to="3"> terms and conditions </a></label>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 book-btn-wrap">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="booked-bike-s4">
Dio
</div>
<div class="booked-bike-price-s4">
Rs.400/-
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<a class="proceed-s4" href="#" data-target="#myCarousel" data-slide-to="3"> CONFIRM </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/iframe/frame.js"></script>
</body>
</html>
答案 0 :(得分：0)
在控制台中，您收到错误“No'Access-Control-Allow-Origin'标头出现在请求的资源上。”
使用PHP的示例代码：
// jQuery part
function get_data_bike(id){
$.ajax({
url: "get_data.php",
data:{id:id}
}).done(function(data) {
// parse data with JSON.parse( data )
});
}
// PHP part, file get_data
<?php
$url = "http://metrobikes.in/api/cities/".$_GET['id']."/models";
echo file_get_contents($url);
die();
?>