我正在尝试做一个简单的练习：
在两个输入中写一个数字，按下按钮，结果是第三个输入。
总和.html：
<html>
<head>
<title>Sum</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="sum.js"></script>
</head>
<body>
<form>
<input name="a"/>+<input name="b"/>=<input name="c"/>
<button id="somar"/>SUM</button>
</form>
</body>
</html>
总和.php：
<?php
$a = 5; $b = 3;
function soma($a, $b = 2){
global $a;
return $a + $b;
}
echo json_encode(array("result" => soma($_GET['a'], $_GET['b'])));
?>
总和.js
$(document).ready(action);
function action(){
$("#somar").click(sum);
}
function sum(){
var a = $("input[name='a']").val();
var b = $("input[name='b']").val();
$.ajax({
type: "get",
dataType : "json",
url: "sum.php",
data: {"a": a, "b": b}
}).done(function(data) {
$("input[name='c']").val(data.result);
//alert(0);
}).fail(function() {
alert(1);
});
}
我第一次单击按钮时似乎什么都没有发生，其他时候它失败了。使用EasyPHP，我必须关闭页面并再次打开它以获得相同的结果。
练习的一部分是使用 php 函数中间的全局变量预测结果。我只是写剧本。
单击提交按钮时，将重新加载页面并将其重置为触发单击事件之前的状态。
sum函数需要捕获事件对象并阻止默认行为。
function sum(event){
event.preventDefault();
此代码存在一些问题，这些问题会阻止它按预期工作。
$a = 5; $b = 3;
应该是这样的：
$a = isset($_POST['a']) ? $_POST['a'] : 0;
$b = isset($_POST['b']) ? $_POST['b'] : 0;
您的 PHP 代码未使用从 ajax 请求发布的值。您不需要全局变量
编辑：这是我完成的一些代码，它们在功能上有效，但不包括全局变量，您可以自己添加它。
// test.php
<?php
function sum($a, $b) {
return $a + $b;
}
$a = isset($_POST['a']) ? $_POST['a'] : 0;
$b = isset($_POST['b']) ? $_POST['b'] : 0;
echo json_encode(array('result' => sum($a, $b)));
?>
// test.html
<html>
<head>
<title>Sum</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form action="#" method="post">
<input name="a"/>+<input name="b"/>=<input name="c"/>
<button id="somar"/>SUM</button>
<script type="text/javascript">
$(document).ready(function() {
function sum(){
var a = $("input[name='a']").val();
var b = $("input[name='b']").val();
$.ajax({
type: "POST",
dataType : "json",
url: "test.php",
data: {"a": a, "b": b}
}).done(function(data) {
$("input[name='c']").val(data.result);
//alert(0);
}).fail(function() {
alert(1);
});
}
$("#somar").on('click', function(event) {
event.preventDefault();
sum();
});
});
</script>
</form>
</body>
</html>
像这样 总之.html
<html>
<head>
<title>Sum</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="sum.js"></script>
</head>
<body>
<form>
<input name="a"/>+<input name="b"/>=<input name="c"/>
<button id="somar"/>SUM</button>
</form>
</body>
</html>
总和.js
<script type="text/javascript">
$(document).ready(function(){
$("#somar").click(function() {
var a = $("input[name='a']").val();
var b = $("input[name='b']").val();
//alert(a);
//alert(b);
$.ajax({
type: 'POST',
url: 'sum.php',
data: {"a": a, "b": b},
success: function(data) {
$("input[name='c']").val(data);
//$(".total").prev('input').val("hello world");
}
});
});
});
</script>
总之.php
<?php
if (isset($_POST['a']) && isset($_POST['b'])){
$a = $_POST['a'];
$b = $_POST['b'];
echo $c= $a+$b;
}
您希望仅根据用户输入进行添加，然后为什么要将值传递给总和的变量.php
我做了一些更改，适合您吗，请参阅我更改的代码
更改 HTML 中的输入类型
<input type="button" id="somar" value="SUM"/>
更改您的 PHP 文件
<?php
//$a = 5; $b = 3;
function soma($a, $b ){
$a= $_GET['a'];
$b= $_GET['b'];
return $a + $b;
}
//echo json_encode(array("result" => soma($_GET['a'], $_GET['b'])));
?>
您的 js 文件中没有变化