我遇到了javascripts的问题。我试图使用类别完成哪个有效,但问题是当我加载页面时脚本被加载,当我尝试使用它时它不起作用。
当我引用(不是F5)但是当我回到那个页面并尝试搜索时,它就可以工作了。我可以知道我哪里出错吗?
在chorme inspector中,当我在页面加载时尝试自动完成时出现错误。
XMLHttpRequest无法加载https://www.visitrentals.com/passingdata.php?term=&term=lon。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://www.visitrentals.com”访问。
谢谢你的帮助。
文件和代码的结构是:
HTML:
<html>
<head>
<!-- To make HTML5 elements work in IE -->
<script>(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()</script>
<base href="https://www.visitrentals.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<meta name="description" content="<?php echo $meta_des;?>">
<meta name="keywords" content="<?php echo $meta_keywords;?>">
<meta name="author" content="">
<link rel="canonical" href="https://www.visitrentals.com"/>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui.min-1.8.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main-2014.js"></script>
<script src="js/ga.js"></script>
<link href="css/originalcss.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css?v=20032014" type="text/css" media="screen"/>
<!-- Favicons -->
<link rel="shortcut icon" href="images/utility/favicon.png" />
<link rel="shortcut icon" href="images/utility/favicon.ico" />
<!-- iOS7 touch icons-->
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="images/utility/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="images/utility/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="images/utility/apple-touch-icon-152x152.png" />
<!-- iOS6 touch icons-->
<link rel="apple-touch-icon-precomposed" type="image/png" href="images/utility/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="72x72" href="images/utility/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="114x114" href="images/utility/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="144x144" href="images/utility/apple-touch-icon-144x144-precomposed.png" />
<style>
.tel { color: #fff; font-size: 14px; }
</style>
</head>
<body>
<form class="homepage-hero-form form-horizontal" action="result.php" method="post" id="searchform">
<!-- <div class="control-group"> -->
<!-- <h1 class="searchboxheader">Serviced apartment accommodation</h1> -->
<input required type="text" id="question1" name="destination" class="span5 homeQ" placeholder="Where do you want to go?">
<input required type="hidden" id="cat" value="" name="cat">
<!-- </div> -->
<!-- <div class="control-group"> -->
<input required type="text" id="arriveDate" name="CheckInDate" class="leftSelect homeSelect" value="Arrive" readonly="readonly" autocomplete='off'/>
<input required type="text" id="departDate" name="CheckOutDate" class="rightSelect homeSelect" value="Depart" readonly="readonly" autocomplete='off'/>
<!-- </div> -->
<!-- <div class="control-group" id="selectRooms"> -->
<!-- <div class="home_visitor leftSelect"> -->
<select id="adult_select" placeholder="Adults" class="" name='adultsRoom_0'>
<option value="1">Adult 1</option>
<option value="2" selected="selected">Adults 2</option>
<option value="3">Adults 3</option>
<option value="4">Adults 4</option>
<option value="5">Adults 5</option>
</select>
<!-- </div> -->
<!-- <div class="home_visitor rightSelect"> -->
<select id="child_select" placeholder="Children" class="" name='childrenRoom_0'>
<option value="0">Children 0</option>
<option value="1">Children 1</option>
<option value="2">Children 2</option>
<option value="3">Children 3</option>
<option value="4">Children 4</option>
</select>
<!-- </div> -->
<!-- </div> -->
<!-- <div class="control-group"> -->
<input type='submit' class="btn btn-large btn-block btn-primary" value="search"/>
<!-- </div> -->
</form>
<script src="js/bootstrap.js"></script>
<script src="js/social/link.js"></script>
<script src="js/social/share.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/validation/jquery.validate2.js"></script>
</body>
</html>
javascript在main-2014.js下:
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>"+ item.category +"</li>" );
currentCategory = item.category;
}
that._renderItem( ul, item );
});
}
});
if($( "#question1" ).length){
$(function() {
$( "#question1" ).catcomplete({
delay: 0,
minLength: 3,
max:10,
//source: "http://www.visitrentals.com/passingdata.php?"+ $("#question1").val(),
source: "passingdata.php?term="+ $("#question1").val(),
select: function(event, ui){
$('#cat').val(ui.item.category);
}
});
});
}
答案 0 :(得分:0)
除非网站明确允许您,否则您无法制作跨域ajax请求。这就是'Access-Control-Allow-Origin'标题的用途,允许其他网站发出ajax请求(以及其他内容)。您可以在此处阅读有关此概念的更多信息http://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing