我刚刚学习 JavaScript 并使用谷歌街景 API。我一直在关注 youtube 上的视频来了解基础知识，但我不确定为什么它不起作用。这是我的所有代码:
<!DOCTYPE html>
<html>
<head>
<title>ajax and googleStreetView</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form id="form-container" class="form-container">
<!-- <label for="number">Number: </label><input type="text" id="number" value=""> -->
<label for="street">Street: </label><input type="text" id="street" value="">
<label for="city">City: </label><input type="text" id="city" value="">
<button id="submit">Submit</button>
</form>
<br>
<h2 id="address" class="address">Enter address</h2>
<img class="photo" id="photo">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
和脚本:
function loadData() {
var $address = $('#address');
// var number = $('#number').val();
var street = $('#street').val();
var city = $('#city').val();
// var address = number + " " + street + ", " + city;
var address = street + ", " + city;
$address.text("Address: " + address + "");
var streetViewURL = 'http://maps.googleapis.com/maps/api/streetview?size=600x400&location=' + address + '';
$('#photo').attr("src", streetViewURL);
return false;
};
$('form-container').submit(loadData);
和CSS:
body {
background-color: white;
}
.photo {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
.address {
color: black;
text-align: center;
}
.form-container {
text-align: center;
}
我是第一次使用 Sublime Text 3，可能这对我的理解能力没有帮助。当我单击“提交”时，什么也没有发生。我担心的一件事是:在我正在观看的视频中，loadData 函数中变量 $address 中的 $ 改变了颜色。在我的编辑器中，$ 不会改变颜色。据我了解 sublimeText，我不知道这是否只是程序中的视觉错误，或者它是否实际上阻止了我的变量的创建。再往后几行，再次使用 $address 变量，在这种情况下，它也不会更改 $ 的颜色来指示它是合法变量。
我做错了什么？预先感谢您的帮助。
最佳答案
您应该为提交事件添加 PreventDefault()，只是为了停止默认过程，并且 #form-container 元素的选择器有拼写错误:
function loadData(e) {
e.preventDefault();
var $address = $('#address');
// var number = $('#number').val();
var street = $('#street').val();
var city = $('#city').val();
// var address = number + " " + street + ", " + city;
var address = street + ", " + city;
$address.text("Address: " + address + "");
var streetViewURL = 'http://maps.googleapis.com/maps/api/streetview?size=600x400&location=' + address + '';
$('#photo').attr("src", streetViewURL);
return false;
};
$('#form-container').submit(loadData);
关于javascript - 使用 jQuery 将表单中的变量作为街景 API 参数传递的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51252112/