当前位置：首页 > news >正文

PHP+JQ实现ajax

news 来源：原创 2024/4/29 7:18:20

之前用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 params = $("#eventForm").serializeArray();
            var i = 0
            for(i = 0; i <= params.length-1; i++){
            if(params[i].value == ''){
                alert(params[i].name + '不能为空');
                return false;
            }

           $.ajax({
                //请求方式
                type:'POST',
                //发送请求的地址
                url:url,
                //服务器返回的数据类型
                dataType:'json',
                data:params,
                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' name='first' id='first'>
        <br>
        <input type='text' name='second' 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 );
}

注意：如果用的是http协议，点击登录的时候会被某些浏览器检测，需要点击两次登录，可以在input密码段里加入 autocomplete="new-password"解决