我一直在尝试使用 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);
最佳答案
您可以在这里做一些不同的事情来完成这项工作:
目前,同时使用 .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);
{"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
关于javascript - 使用 Ajax 和 JSON 在 HTML 中显示 PHP 回显消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33394903/