Question

我有一个非常奇怪的问题，我现在已经去了一段时间，在互联网上搜索答案而没有找到任何答案。我正在尝试解析一个JSON对象（到目前为止已成功）但我遇到的问题是，当我链接到我的HTML文件时，它会在HTML表单部件上单击提交后打开一个新选项卡。我确定这是一个愚蠢的问题，但我真的没有找到答案。我正在使用PHP来编码一个简单的JSON对象。这是我的HTML部分代码：

<!DOCTYPE HTML>
<HTML>
<body>
<center>
<H1> Registration </H1>
<form action = "/Register.php" method = "post">
<h2>Username:</h2>
<input type = "text" name = "username"><br>
<h2>Name:</h2>
<input type = "text" name = "name"><br>
<h2>Password:</h2>
<input type = "password" name = "password"><br>
<h2>Age:</h2>
<input type = "number" name = "age"><br><br>
<input type = "submit" name = "Submit">
</form><br>
<a href = "index.html"> Back To Login </a>
<p id = "demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.success;
    }
};
xmlhttp.open("GET", "Register.php", true);
xmlhttp.send();

</script>
</center>
</body>
</HTML>

这是php / json部分的代码：

<?php
    $con = mysqli_connect("localhost", "id5137223_bellevueeast", "BEAST", "id5137223_users");

    $name = $_POST["name"];
    $age = $_POST["age"];
    $username = $_POST["username"];
    $password = $_POST["password"];
    $statement = mysqli_prepare($con, "INSERT INTO Users (name, username, age, password) VALUES (?, ?, ?, ?)");
    mysqli_stmt_bind_param($statement, "ssis", $name, $username, $age, $password);
    mysqli_stmt_execute($statement);

    $response = array();
    $response["success"] = true;  

    echo json_encode($response);

    ?>

Answer 1

它正在打开一个新的窗口/选项卡，因为您没有阻止HTML表单的默认行为，该表单将提交给它自己的位置。基本上，它向表单所在的页面发送请求，其中包含附加表单中的get / post数据。您的JavaScript函数执行正常，但是表单的默认操作会导致第二个窗口打开。

如果您不希望发生这种情况，则必须打破或停止HTML表单的默认行为，并使用prevent default。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

根据您的代码判断，我猜您想从Register.php调用JSON并将其显示在同一页面上。在这种情况下，您需要做的是在像这样的Javascript函数中包含XMLRequest

function showResult() {
//do your XMLRequest stuff here
//change the div accordingly
document.getElementById("placeholder").innerHTML=*prettified json here*;
}

然后你需要做的是创建一个div来显示你的结果并充当占位符

<div id="placeholder">

接下来是将提交更改为按钮并向其添加onPress =“showResult（）”。

<button onPress="showResult()">

如果您使用的是AJAX，则无需提交

Answer 3

WOW。事实上，我意识到我是个白痴。我诊断问题完全错了。我认为表单实际上是在表现时它正在完成它应该做的事情：在表单完成后在选项卡中显示数据。通过这样做，我终于做了我想做的事情：

<iframe id="invisible" name="invisible" style="display:none;"></iframe>

然后我将表单定位为iframe，因此它不会显示任何内容抱歉让你们烦恼。

JSON echo打开新标签

3 个答案: