PHP+JQ实现ajax

之前用JS写的ajax裸奔没问题，放到TP5中莫名炸掉，今天试着研究了一下JQ实现，直接附上代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>Ajax</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script>


       function ajax() {
           var first = $('#first').val();
           var second = $('#second').val();
           var _json = jQuery.param({"first":first,"second":second});

           $.ajax({
                //请求方式
                type:'POST',
                //发送请求的地址
                url:'www.why.com/admin-Chome-ajax.html',
                //服务器返回的数据类型
                dataType:'json',
                data:_json,
                success:function(data){
                    console.log(data);
                    document.getElementById('content').innerHTML += "加:" + data.jia + '<br>';
                    document.getElementById('content').innerHTML += "减:" +data.jian + '<br>';
                    document.getElementById('content').innerHTML += "乘:" +data.cheng + '<br>';
                    document.getElementById('content').innerHTML += "除:" +data.chu + '<br>';
                },
                error:function(jqXHR){
                    console.log(jqXHR);
                }
            });

        }

    </script>
</head>
<body>
    <form id="myform">
        <input type='text' id='first'>
        <br>
        <input type='text' id='second'>
        <br>
        <input type='button' id="button" onclick="ajax()"  value='计算'>
        <div id='content'>
        </div>
    </form>
</body>

</html>

PS：url是我直接放在TP5中用rewrite的伪静态，直接改成php文件路径即可

PHP：

public function ajax(){

    error_reporting(E_PARSE|E_ERROR|E_WARNING);

    $first = $_POST ['first'];
    $second = $_POST ['second'];
    $n1 = $first + $second;
    $n2 = $first - $second;
    $n3 = $first * $second;
    $n4 = $first / $second;
    $data = array (
        'jia' => $n1,
        'jian' => $n2,
        'cheng' => $n3,
        'chu' => $n4
    );

    echo json_encode ( $data );
}

猜你喜欢