提交表单并在没有jQuery的情况下获得JSON响应
提交表单并在没有jQuery的情况下获得JSON响应
提问于 2018-06-17 18:49:09
我有一个简单的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格式的答案，并将它们显示在我的表单下面，而不是被重定向到服务器页面。
更多细节:我从服务器得到的答案示例：
{"guess": "lower"}我不能使用任何类型的JavaScript库，所以禁止使用JQuery。
回答 3
Stack Overflow用户
发布于 2018-06-17 20:22:23
您只需使用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>Stack Overflow用户
发布于 2018-06-17 19:11:23
几年前，我已经编写了一个简单的js部分，它允许您轻松地发送XHR请求。它有点过时，但它是一个简单的模板，可以理解您如何继续下去。您可以使用webworkers对其进行现代化改造，使其更接近您的设置。如果你希望我可以用JS发布一个旧的原型，我和webworker等等(但一些变量的名称是德语的。)
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);
}
}
}
}Stack Overflow用户
发布于 2018-06-18 01:37:11
当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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50895909
复制相关文章
相似问题
腾讯云开发者
