Javascript 使用Ajax和JSON在HTML中显示PHP回显消息

我一直在尝试使用Javascript/jQuery和json将我的PHP文件连接到我的HTML文件。当用户在表单的输入框中输入一个数字并提交时，PHP文件应该将该数字乘以2并将其发送回用户

但是，当我按下submit按钮时，它会将我带到php页面，而不是以HTML显示信息（在php文件中处理）

这是我的HTML表单：

<div id="formdiv">
    <form action="phpfile.php" method="get" name="form1" id="form1" class="js-php">
    Mata in ett nummer: <input id="fill1" name="fill1" type="text" />
    <input type="submit" id="submit1" name="submit1" value="submit">
</form>

PHP文件：

$kvantitet = $_GET['fill1'];
$y = 2; 
$work = $kvantitet * $y;
$bork = $work * $kvantitet;
echo json_encode($work) ."<br>"; 
echo json_encode($bork); 

$kvantitet=$\u GET['fill1']；
$y=2；
$work=$KVantet*$y；
$bork=$work*$KVANTIET；
echo json_编码（$work）。“
”；
echo json_编码（$bork）；

您需要JSON数据，但返回的不是JSON

尝试在PHP文件中输出以下内容：

$data['work'] = $work;

$data['bork'] = $bork;

echo json_encode( (object)$data );

使用console.log检查AJAX调用上的传入数据，然后根据需要进行处理。

我认为您需要&

data = $(this).serialize()+'&'+$.param(data); 

正如@leonardo_palma在评论中提到的，也许你需要使用

e.preventDefault（）在提交功能的开头

我更喜欢使用

$(document).on('submit','.js-php',function(){/*code here*/});

在这里，有几件事你可以做得稍有不同，以使这项工作：

当前，同时使用和
数据
变量包含如下内容：

someurl.php?fill1=1&0=f&1=i&2=l&3=l&4=1&5=%3D&6=1

如果只使用
.serialize
，您将获得更易于使用的功能：

?fill1=5

$result    = array();
$kvantitet = $_GET['fill1']; // Lets say this is 5
$y         = 2; 
$work      = $kvantitet * $y;
$bork      = $work * $kvantitet;

//add the values to the $result array
$result = array(
    "work" => $work,
    "bork" => $bork
);

echo json_encode($result);


在PHP方面，当前您的代码输出：

:


回到JS端，您可以处理成功回调中的数据：

$(".js-php").submit(function(e){
    data = $(this).serialize(); 
    $.ajax({
        type:"GET",
        datatype:"json",
        url:"phpfile.php",
        data: data,
        success: function (data){
            // *data* is an object - {"work":4,"bork":8}
            $("#formdiv").append("Your input: "+data)
            console(data);
        }
    });
    // Use return false to prevent default form submission
    return false;
});

访问对象中属性的一种方法是使用点表示法：

data.work //Outputs 4
data.bork //Outputs 8

但是在使用JavaScript处理/访问对象和数组时

包含您的（工作）jQuery
为什么不让javascript将其相乘？您提供的标记中没有
js php
类。@Baruch我想学习如何将echo语句从php连接到HTML。哎呀，我不好，现在就在@jonstirling中编辑它。您的问题是submit方法正在执行GET，不是$.ajax，因为您将
e.preventDefault（）
在submit方法的末尾，而不是开头。请注意，由于字符串键，不需要使用
（对象）
强制转换。是的，字符串键不需要强制转换，但对我来说，我通常喜欢在执行encodeHello M.Doye之前将其作为一个对象。我感觉我正在取得很大的进步，但是，我仍然无法像您在JSFIDLE上的示例中那样，从PHP获取以HTML显示的回显消息。以下是我到目前为止所做的：（还不太擅长使用JSFIDLE）@PHPScrub在浏览器开发人员控制台中使用network inspector来确保请求按预期发送-此外，还需要更新FIDLE。（你贴的和我贴的一样）我试过了。正在发送请求。但是不管我怎么做，它都会将我重定向到PHP文件。听起来它可能是表单，这样尝试，没有实际的表单-@PHPScrub，我在ajax调用后漏掉了一个分号，这可能导致了您的问题，更新了小提琴和答案
{"work":4,"bork":8}

$(".js-php").submit(function(e){
    data = $(this).serialize(); 
    $.ajax({
        type:"GET",
        datatype:"json",
        url:"phpfile.php",
        data: data,
        success: function (data){
            // *data* is an object - {"work":4,"bork":8}
            $("#formdiv").append("Your input: "+data)
            console(data);
        }
    });
    // Use return false to prevent default form submission
    return false;
});

data.work //Outputs 4
data.bork //Outputs 8