jQuery Mobile JSON问题
[英]jQuery Mobile JSON issues
问题描述
我一直在尝试在空闲时间使用jQuery Mobile，并尝试将其与Riot API的League of Legends组合在一起。 我在记事本中放了一个基本框架，在第一页上，将输入一个召唤师名称，然后单击搜索按钮或在第二页上创建，它将访问api并显示名称中的基本召唤师信息。 。
我似乎无法正确调用我的脚本，而且我不知道还有什么地方可以找出我做错了什么。 任何帮助将不胜感激。 如果我错过了其他信息，请随时询问。 （良好的测试召唤者名称为blksheep93）
<!DOCTYPE html>
<html>
<head>
<title>League Of Legends Coach Web Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
<p>Please enter your summoner name in the text box below.</p>
<h2>Enter Your Summoner Name</h2>
<div class="ui-field-contain">
<input type="text" name="SumName" id="SumName" placeholder="Summoner Name">
<br> <a href="#pagetwo" id="callSum" class="ui-btn">Search</a>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header" data-theme="a">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="content">
<div id="resultLog"></div>
<label id="testLabel" for="test">Test Label</label>
<ul data-role="listview" id="Summoner" data-theme="a"></ul> <a href="#pageone">Go to Page One</a>
</div>
<div data-role="footer" data-theme="a">
<h1>Footer Text</h1>
</div>
</div>
<script>
(function($) {
$(document).on('pageinit', '#pagetwo', function()) {
var url = 'https://na.api.pvp.net';
var spec = '/api/lol/{region}/v1.4/summoner/by-name/';
var user = $("#SumName").val();
var key = '?api_key=7839f0aa-82ac-47b9-8c4b-0eae4e2e39cc';
var url2 = url + spec + user + key;
$(#testLabel).val() = $('url2');
$.ajax({
url: url + spec + user+key,
dataType: "jsonp",
async: true,
success: function(result) {
ajax.parseJSONP(result);
},
error: function(request, error) {
alert('Network error has occurred please try again!');
}
});
$.getJSON(url2, function(data)) {
$.each(data.items, function(i, item) {
console.log(JSON.stringify(item));
$('#Summoner').append('<li><a href="" data-id="' + item.id + '"><h3>' + item.name + '</h3><p>" Summoner Level: "' + item.summonerLevel '</p></a></li>');
$('#Summoner').listview('refresh');
}
</script>
</body>
</html>
编辑：我修复了movieName的小问题。 不确定如何到达那里，但是现在应该是这样。 在我运行它之后，控制台会告诉我Uncaught SyntaxError：Unexpected token）/C:/Users/Tiko/Documents/jQuery/Program%20Files/SummonerSearch.html:53我相信（同样，记事本）是脚本文件的开始。 控制台日志中url2上没有任何内容。
1 个解决方案
解决方案1
0 2014-06-17 14:15:19
我修复了您的代码。 它有很多错误，主要是语法错误。 我在JavaScript中添加了注释，以尝试帮助您了解问题所在。 如果您想获得更好的效果，而不仅仅是复制/粘贴编码，请阅读JavaScript。
<!DOCTYPE html>
<html>
<head>
<title>League Of Legends Coach Web Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
<p>Please enter your summoner name in the text box below.</p>
<h2>Enter Your Summoner Name</h2>
<div class="ui-field-contain">
<input type="text" name="SumName" id="SumName" placeholder="Summoner Name">
<br> <a href="#pagetwo" id="callSum" class="ui-btn">Search</a>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header" data-theme="a">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="content">
<div id="resultLog"></div>
<label id="testLabel" for="test">Test Label</label>
<ul data-role="listview" id="Summoner" data-theme="a"></ul> <a href="#pageone">Go to Page One</a>
</div>
<div data-role="footer" data-theme="a">
<h1>Footer Text</h1>
</div>
</div>
<script>
(function($) {
$(document).on('pagecreate', '#pagetwo', function() { // removed extra ) after function()
var url = 'https://na.api.pvp.net';
// replaced {region} with na
var spec = '/api/lol/na/v1.4/summoner/by-name/';
var user = $("#SumName").val();
var key = '?api_key=7839f0aa-82ac-47b9-8c4b-0eae4e2e39cc';
$.ajax({
url: url + spec + user+ key,
dataType: "json", // riot api does not support jsonp, fortunately it does support cross-domain-request
success: function(result) { // removed extra ) after function()
// moved the appending of the item to inside this success callback
console.log(result)
$.each(result, function(i, item) {
console.log(item);
$('#Summoner').append('<li><a href="" data-id="' + item.id + '"><h3>' + item.name + '</h3><p>" Summoner Level: "' + item.summonerLevel + '</p></a></li>');
$('#Summoner').listview('refresh');
});
},
error: function(request, error) {
alert('Network error has occurred please try again!');
}
}); // closed your function
}); // closed your function
})(jQuery); // closed your function, passed in jQuery
</script>
</body>
</html>
jQuery 的移动导航问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.