JQuery/PHP - Ajax 请求，JSON 响应

Question

我正在尝试做一个简单的练习：

在两个输入中写一个数字，按下按钮，结果是第三个输入。

sum.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>

sum.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'])));
?>

sum.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 函数中间的全局变量预测结果。我只是来写剧本的

Answer 1

此代码存在一些问题，会阻止其按预期工作。

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

Answer 2

您只想根据用户输入添加，然后才将值传递给 sum.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文件没有变化

Answer 3

当您点击提交按钮时，您正在重新加载页面并将其重置为触发点击事件之前的状态。

您的 sum 函数需要捕获事件对象并防止默认行为。

function sum(event){
    event.preventDefault();

Answer 4

Tru like this in sum.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>

sum.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>

在 sum.php

<?php
if (isset($_POST['a']) && isset($_POST['b'])){
$a = $_POST['a'];
$b = $_POST['b'];
echo $c= $a+$b;
}

JQuery/PHP - Ajax 请求，JSON 响应

JQuery/PHP - Ajax Request, JSON response

html

php

ajax

jquery

json