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

Question

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

但是，当我按下提交按钮时，它会将我带到 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>

这是我的 Javascript 文件

$(".js-php").submit(function(e){

    var data = {
        "fill1"
    };
    data = $(this).serialize() + $.param(data); 

    $.ajax({
        type:"GET",
        datatype:"json",
        url:"phpfile.php",
        data: data,
        success: function (data){
            $("#formdiv").append("Your input: "+data)
            alert (data);
        }
    })

    e.preventDefault();
});

PHP 文件：

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

Answer 1

您可以在这里做一些不同的事情来完成这项工作：

目前，同时使用.serialize 和$.param 您的data 变量包含如下内容：

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

如果你只使用.serialize，你会得到一些更容易使用的东西：

?fill1=5

---

在 PHP 方面，目前您的代码输出 something like this：

4<br>8

通过将值添加到数组中，您可以获得可以使用的响应：

$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);

Which will output:

{"work":4,"bork":8}

---

回到 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

但是here is a really great answer 使用 JavaScript 处理/访问对象和数组。

Here is a Fiddle 包含您的（工作）jQuery

Answer 2

您期望的是 JSON 数据，但您发回的不是 JSON

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

$data['work'] = $work;

$data['bork'] = $bork;

echo json_encode( (object)$data );

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

Answer 3

我觉得你需要&

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

正如 cmets 中提到的@leonardo_palma 可能你需要在提交函数的开头使用e.preventDefault();

我更喜欢使用

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