不面向未来

Question

我在BOOTSTRAP / Javascript中创建一个Web应用程序，它从JSON中检索高分，然后检查可用的任务。

目前这是我在javascript文件中设置的方式

var baseURL = 'https://www.tip.it/runescape/json/hiscore_user?rsn=&old_stats=1';
var updatedURL =;
var requestURL = updatedURL;
var request = new XMLHttpRequest()

request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
  var userStats = request.response;
}


function URLupdater() {
}

我想要做的是从我的html页面上的输入表单中连接信息，

        <div id="Userinput" class="col-md-2">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1"> <img src="/img/admincrown.gif~c200.gif" class="img-rounded" width="20" height="20"> </span>
                <input type="text" class="form-control" placeholder="Runescape Username" aria-describedby="basic-addon1">
            </div>
        </div>
        <div id="submitbutton" class="col-md-1"><button id="retrievestats" type="button" class="btn btn-default">Get Stats</button></div>

在？rsn =

之后进入上面的baseURL

我目前正在尝试创建一个函数来读取按钮单击时的输入，然后将URL切换到其中包含用户名的新URL，然后从那里继续检索JSON数据。我是正确的思考方式，还是偏离轨道。

Answer 1

你的意思是你想要实现的目标是什么？：

var baseURL = 'https://www.tip.it/runescape/json/hiscore_user?rsn=&old_stats=1&concatenatedData=1234';

如果是这样，我认为没有任何问题。你好像可以继续。

Answer 2

不面向未来

假设您仅想要在网址上附加用户名，而不需要以任何其他方式对其进行操作，您可以这样做：

function getUserData( user_name ) {
    var requestURL = "https://www.tip.it/runescape/json/hiscore_user?old_stats=1&rsn=",
        request = new XMLHttpRequest();
    request.open( "GET", requestURL + encodeURIComponent( user_name ) );
    // various sanitizations should be employed on the backend when dealing with user input
    request.responseType = "json";
    request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
    request.addEventListener( "readystatechange", function() {
        if ( request.readyState == 4 ) {
            if ( request.status == 200 ) {
                var user_stats = request.responseText;
                // process response
            } else {
                // handle errors
            }
        }
    }, false );
    request.send();
}

window.addEventListener( "DOMContentLoaded", function() {
    document.getElementById( "retrievestats" ).addEventListener( "click", function() {
        var user_input = document.querySelector( "#Userinput input[name=user_name]" ),
            user_name;
        if ( user_input ) {
            user_name = user_input.value;
            if ( user_name ) {
                getUserData( user_name );
            }
        }
    }, false );
}, false );

当然还有很多其他因素，这只是一个一堆代码，而不是一堆代码。

<强> HTML

您可以考虑使用<form>，而不是将表单包装在<div>中。它不重要，但有意义，可以像改变一些标签（和CSS）一样简单。

<form id="Userinput" class="col-md-2">
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"> <img src="/img/admincrown.gif~c200.gif" class="img-rounded" width="20" height="20"> </span>
        <input name="user_name" type="text" class="form-control" placeholder="Runescape Username" aria-describedby="basic-addon1">
    </div>
    <div id="submitbutton" class="col-md-1">
        <input id="retrievestats" type="button" class="btn btn-default" value="Get Stats">
    </div>
</form>

<强>摘要

由于您提供的代码及其存在的有限解释显然只是更大整体的一小部分，因此在一个答案中要涵盖的变量太多。至于将用户名添加到＆＃34; GET＆＃34;网址，这将工作。其余的 - 我不能说。

从输入表单连接到URL

2 个答案:

不面向未来