提交表单并在没有 jQuery 的情况下获得 JSON 响应

Question

我有一个这样的简单 HTML 表单：

            <div class="border-little text-center grey">
                <form action="https://www.THIS IS MY URL.php" method="get">
                    <input name="player" id="player" value="1" class="hidden">
                    <label for="number">Enter a number</label>
                    <input type="text" id="number" name="number" placeholder="">
                    <input type="submit" value="Submit">
                </form>
            </div>

操作如下： 玩家输入一个数字，服务器使用 JSON 格式回答。

我的问题： 当我按下“提交”时，我的网页离开并重定向到服务器页面，显示 JSON 格式的答案。

我想做的事： 我想留在我的页面上并能够接收 JSON 格式的答案并将它们显示在我的表单下方，而不是被重定向到服务器页面。

更多详情： 我从服务器获得的 JSON 答案示例：

{"guess": "lower"}

我不能使用任何类型的 JavaScript 库，所以禁止使用 JQuery。

Answer 1

你只是使用js的ajax方法

function r_submit() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://www.THIS IS MY URL.php", true);
var params = {"player":document.getElementById("player").value};
xhttp.send(params);
xhttp.onload = function() {
    alert(xhttp.responseText);
}
} 

点击按钮时执行r_submit()函数按钮

这里你的 html 代码会是这样的

 <div class="border-little text-center grey">
                <input name="player" id="player" value="1" class="hidden">
                <label for="number">Enter a number</label>
                <input type="text" id="number" name="number" placeholder="">
                <input type="submit" value="Submit" onsubmit='r_submit()'>
            </form>
        </div>

Answer 2

几年前我写过一个简单的 js 部分，它允许您轻松发送 XHR 请求。它有点过时，但它是一个简单的模板，可以帮助您了解如何继续。 您可以通过使用网络工作者对其进行现代化改造，并使其更接近您的设置。如果你希望我可以在 JS 中与 webworkers 等一起发布一个旧原型（但有些变量的名称是德语的..）

function getElement(inp)
{
    return document.getElementById(inp);
}

function put(data,div)
{
    getElement(div).innerHTML = data;
}

//information: autoput means: do you wish to write the raw response in a div? [0,1] - when 1 then put the id of the div in var div at the call of the function
function get(url,data,method,autoput,div)
{
    var req;
    if(window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();
    }
    else
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }

    req.onreadystatechange = function()
    {
        if(req.readyState == 4 && req.status == 200)
        {
            if(autoput == 1)
            {
                put(req.responseText, div);
            }
        }
    }

    if(method.toLowerCase() == "get")
    {
        req.open("GET",url+data,true);
        req.send();
    }
    else
    {
        if(method.toLowerCase() == "post")
        {
            if(data !== "")
            {
                req.open("POST", url, true);
                req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                req.send(data);
            }
        }
    }
}

Answer 3

当 jQuery 被禁止时，可以使用 iframe 技术。将表单提交到指定的 iframe 并等待 onload 事件。修改后的 html 和 js 代码如下：

<div class="border-little text-center grey">
    <form action="https://www.THIS IS MY URL.php" method="get" target="myframe">
        <input name="player" id="player" value="1" class="hidden">
        <label for="number">Enter a number</label>
        <input type="text" id="number" name="number" placeholder="">
        <input type="submit" value="Submit">
    </form>
</div>
<iframe id="myframe" name="myframe"></iframe>


<script>
    var myframe = document.getElementById("myframe");
    myframe.onload = function() {
        var iframeDocument = myframe.contentDocument || myframe.contentWindow.document; // get access to DOM inside the iframe
        var content = iframeDocument.textContent || iframeDocument.body.textContent; // get text of iframe
        var json = JSON.parse(content);

        if (json && json.guess) {
            // process the json here
            alert(json.guess);
        }
    }
</script>