Question

我正在学习javascript并使用Google街景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变量，在这种情况下，它也不会更改$的颜色以表明它是合法变量。

我在做什么错？预先感谢您的帮助。

Answer 1

您应该为提交事件添加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);

Answer 2

更改此：

$('form-container').submit(loadData);

对此：

$('#form-container').click(function(event){
    event.preventDefault();
    loadData();
});

使用jQuery

2 个答案: