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（但是有些变量的名字是德语的。）

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>

提交表单并获得没有jQuery的JSON响应

3 个答案: