JQuery/PHP-Ajax请求，JSON响应_Php_Jquery_Html_Ajax_Json

JQuery/PHP-Ajax请求，JSON响应

php jquery html ajax json

JQuery/PHP-Ajax请求，JSON响应,php,jquery,html,ajax,json,Php,Jquery,Html,Ajax,Json,我正在尝试做一个简单的练习：在两个输入中写入一个数字，按下按钮，得到第三个输入 sum.html： <html> <head> <title>Sum</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> &

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

在两个输入中写入一个数字，按下按钮，得到第三个输入

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>

第一次单击按钮时，似乎什么也没发生，其他时候则失败了。使用EasyHP，我必须关闭页面并再次打开，才能获得相同的结果

部分运动是用PHP函数中的全局变量预测结果。我只编写脚本。

此代码存在一些问题，可能会妨碍它按预期工作

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

//test.php
//test.html
总和
+=
总和
$（文档）.ready（函数（）{
函数和（）{
var a=$（“输入[name='a']”）val（）；
var b=$（“输入[name='b']”）val（）；
$.ajax({
类型：“POST”，
数据类型：“json”，
url:“test.php”，
数据：{a:a，“b:b}
}).完成（功能（数据）{
$（“input[name='c']”）val（data.result）；
//警报（0）；
}).fail（函数（）{
警报（1）；
});
}
$（“#somar”）。在（'click'，函数（事件）{
event.preventDefault（）；
sum（）；
});
});

您只想根据用户输入进行添加，那么为什么要将值传递给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文件中没有任何更改

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

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

sum

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

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

真像这样 in sum.html


总和
+=
总和

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

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


$（文档）.ready（函数（）{
$（“#somar”）。单击（函数（）{
var a=$（“输入[name='a']”）val（）；
var b=$（“输入[name='b']”）val（）；
//警报（a）；
//警报（b）；
$.ajax({
键入：“POST”，
url:'sum.php'，
数据：{a:a，“b:b}，
成功：功能（数据）{
$（“输入[name='c']”）val（数据）；
//$（“.total”）.prev（'input'）.val（“hello world”）；
}
});
});
});

in sum.php

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

开始：单击（sum（））。它是一个函数而不是变量。要继续：在php函数soma（）
中，为什么要将$a
声明为全局
？？？它隐藏了您的实际参数$a
…：-（感谢Debflav，修正了现在输入c中总是有值5，和（）似乎在一开始就运行，没有点击。MarcoS，这是练习给出的代码的一部分，我只编写脚本。我希望输入c的值5+$b，正如我在前面的评论中所说的…@Debflav在使用jquery时，不要点击（）…点击（sum）是正确的，但是部分练习是在练习中用全局变量预测结果。我只是写脚本。我不明白你的意思，我看不出有什么理由使用全局变量来做这个。我想他已经被要求预测一个给定的代码的结果，作为一个学校的练习……没有理由。在这里使用一个全局变量，因为它会忽略第一个输入，但是练习的一部分是理解全局变量，所以它应该在那里，即使它只会得到一个实际的总和。是的，如果在这种情况下使用ajax，为什么要使用表单提交呢？@webkit-希望是因为，这似乎是可行的，但我在t他认为这样做的好处之一是不必重新加载页面来更改其内容。页面重新加载是因为ajax请求吗？不，页面重新加载是因为表单中有一个提交按钮并单击了它。提交按钮的默认行为是提交表单。提交表单会加载新页面。@Quentin谢谢你的回答，渐进式增强我是怎么理解的……但是不引人注目的Javascript？如果你将按钮更改为具有相同ID的“a标记”，那怎么会让它变得突兀呢？
<?php
if (isset($_POST['a']) && isset($_POST['b'])){
$a = $_POST['a'];
$b = $_POST['b'];
echo $c= $a+$b;
}