Javascript jQuery移动JSON问题_Javascript_Jquery_Html_Jquery Mobile

Javascript jQuery移动JSON问题

javascript jquery html jquery-mobile

Javascript jQuery移动JSON问题,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我一直在尝试在空闲时间使用jQuery Mobile，我正在尝试将一个应用程序与传奇联盟Riot API缝合在一起。我有一个基本的框架放在记事本里，在第一页，召唤者的名字将被输入，点击搜索按钮或在第二页的创建，它将访问api并从名字中显示召唤者的基本信息我似乎无法正确地调用脚本，我不知道还有什么地方可以找出我做错了什么。任何帮助都将不胜感激。如果我遗漏了任何其他信息，请毫不犹豫地询问。（好的测试召唤师名字是blksheep93）传奇联盟教练Web应用程序欢迎来到我的主页这是我的传奇联盟

我一直在尝试在空闲时间使用jQuery Mobile，我正在尝试将一个应用程序与传奇联盟Riot API缝合在一起。我有一个基本的框架放在记事本里，在第一页，召唤者的名字将被输入，点击搜索按钮或在第二页的创建，它将访问api并从名字中显示召唤者的基本信息

我似乎无法正确地调用脚本，我不知道还有什么地方可以找出我做错了什么。任何帮助都将不胜感激。如果我遗漏了任何其他信息，请毫不犹豫地询问。（好的测试召唤师名字是blksheep93）


传奇联盟教练Web应用程序
欢迎来到我的主页
这是我的传奇联盟统计分析和教练应用程序的持续测试页面
请在下面的文本框中输入您的召唤师姓名
输入你的召唤者姓名


页脚文本
欢迎来到我的主页
测试标签

页脚文本
（函数（$）{
$（document）.on（'pageinit'，'#pagetwo'，function（））{
var url='1〕https://na.api.pvp.net';
var spec='/api/lol/{region}/v1.4/caller/by name/'；
var user=$（“#SumName”）.val（）；
变量键='？api_键=7839f0aa-82ac-47b9-8c4b-0eae4e2e39cc'；
var url2=url+spec+user+key；
$（#testLabel）.val（）=$（'url2'）；
$.ajax({
url:url+spec+user+key，
数据类型：“jsonp”，
async:true，
成功：功能（结果）{
parseJSONP（结果）；
},
错误：函数（请求、错误）{
警报（'发生网络错误，请重试！'）；
}
});
$.getJSON（url2，函数（数据））{
$.each（data.items，function（i，item）{
log（JSON.stringify（item））；
$（“#召唤者”）。追加（“”）；
$（“#召唤者”）。列表视图（“刷新”）；
}

编辑：我修复了movieName的小问题。不确定它是如何出现的，但它现在应该是这样的。在我运行它之后，控制台告诉我未捕获的语法错误：意外标记）/C:/Users/Tiko/Documents/jQuery/Program%20Files/callersearch.html:53

我相信（同样，记事本）是脚本文件的开始。控制台日志中的url2上没有任何内容。

我修复了您的代码。它有很多错误，主要是语法错误。我在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>


传奇联盟教练Web应用程序
欢迎来到我的主页
这是我的传奇联盟统计分析和教练应用程序的持续测试页面
请在下面的文本框中输入您的召唤师姓名
输入你的召唤者姓名


页脚文本
欢迎来到我的主页
测试标签

页脚文本
（函数（$）{
$（document）.on（'pagecreate'，'#pagetwo'，function（）之后的function（）{//removed extra）
var url='1〕https://na.api.pvp.net';
//将{region}替换为na
var spec='/api/lol/na/v1.4/caller/by name/'；
var user=$（“#SumName”）.val（）；
变量键='？api_键=7839f0aa-82ac-47b9-8c4b-0eae4e2e39cc'；
$.ajax({
url:url+spec+user+key，
数据类型：“json”//RITOAPI不支持jsonp，幸运的是它支持跨域请求
成功：函数（）之后的函数（结果）{//removed extra）
//已将项的附加移动到此成功回调中
console.log（结果）
$。每个（结果、功能（i、项目）{
控制台日志（项目）；
$（“#召唤者”）。追加（“”）；
$（“#召唤者”）。列表视图（“刷新”）；
});
},
错误：函数（请求、错误）{
警报（'发生网络错误，请重试！'）；
}
})；//关闭了你的函数
})；//关闭了你的函数
})（jQuery）；//关闭函数，传入jQuery

在--var url2--add--console.log（url2）；--之后，检查浏览器的控制台输出以查看显示的url。复制url并将其粘贴到新的浏览器窗口中，然后按enter键。您是否看到任何json回调数据出现？？？我得到“拒绝访问”，因此可能是您的API密钥无效。您可以吗

<!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>