jquery的ajax语法案例

最新推荐文章于 2025-08-11 20:48:17 发布

原创最新推荐文章于 2025-08-11 20:48:17 发布 · 977 阅读

0 ·

CC 4.0 BY-SA版权

05ajax 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的HTML页面如何通过Ajax技术从PHP文件中获取动态数据并展示出来。示例中利用jQuery库简化了Ajax调用过程，并演示了如何处理JSON及HTML类型的数据返回。

01first.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <input type="button" value="点击" id="btn">
    <script>
        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    // url:"01data.php",
                    url:"02data.php",
                    // dataType:"json",
                    dataType:"html",
                    type:"get",
                    // data:{},
                    success:function(data){
                        alert(data);
                    },
                    error:function(e){
                        // alert("错误");
                        console.log(e);
                    }
                });
            });
        });

    </script>
</body>
</html>

01data.php

<?php 
    $arr = array("username"=>"zhangsan","password"=>"123");
    echo json_encode($arr);
?>

02data.php

<?php 
    $tag = '<div>水果</div><div>水果</div>';
    echo $tag;
?>