Question

我试图将单独的PHP文件中的两条PHP echo消息显示在我的HTML正文页面上。每当您单击提交按钮时，都应在HTML页面中弹出回显消息，而不会将我重定向到PHP页面。

我需要通过Javascript连接到我的两个文件，所以我编写了一个脚本attemtping来连接HTML文件和PHP文件。

我的HTML：

<div id="formdiv">        
<form action="phpfile.php" method="get" name="fillinform" id="fillinform" class="js-php">
      <input id="fillintext" name="fill" type="text" />
            <input type="submit" id="submit1" name="submit1">
            </form>
</div>

phpfile.php：

 $q = $_GET['fill'];
$y = 2; 
$work = $q * $y;
$bork = $work * $q;

echo json_encode($work) ."<br>"; 

echo  json_encode($bork);

使用Javascript：

 $(".js-php").submit(function()
    var data = {
    "fill"
    };
    data = $(this).serialize() + $.param(data); 

        $.ajax({
        type:"GET",
        datatype:"json",
        url:"phpfile.php",
        data: data,
        success: function (data){
        $(".formdiv").html(
        ""
        "Your input: ")
        }

Answer 1

您将逻辑附加到.submit()事件，如果您不阻止默认操作，则表单将提交给服务器。你可以这样阻止它：

$(".js-php").submit(function(e) {
    // your code goes here
    e.preventDefault();
});

Answer 2

您必须将数据附加到您的div：

npm install grunt-cli -g

Answer 3

根据您的HTML，您应该尝试以下代码：如果你想替换id =＆＃34; formdiv＆＃34;

的div中的整个html

 success: function (data){
    $("#formdiv").html("Your input: "+data)
}

或

 success: function (data){
    $("#formdiv").text("Your input: "+data)
}

如果要将数据附加到具有id =＆＃34; formdiv＆＃34;的div中。

 success: function (data){
    $("#formdiv").append("Your input: "+data)
}

Answer 4

在$(".js-php").submit(function(e)之后添加花括号，并在ajax结束后关闭它。
在调用ajax之前添加e.preventDefault()，以便它不会重定向你到phpfile.php
在ajax成功调用的函数内添加alert(data)。
语法错误n line $(".formdiv").html("""Your input: ");

您的更新代码应如下所示。

$(".js-php").submit(function(e){
    var data = {
    "fill"
    };
    data = $(this).serialize() + $.param(data); 
    $.ajax({
        type:"GET",
        datatype:"json",
        url:"phpfile.php",
        data: data,
        success: function (data){
            alert(data);
    }
}

尝试使用JSON在HTML中显示PHP echo

4 个答案: