ajax get,post,ajax基础使用

Posted 行走江湖的码农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax get,post,ajax基础使用相关的知识,希望对你有一定的参考价值。

使用jquery 调用ajax的方法有这几种方法

可以使用 get,post,ajax(这两种的集合),getJSON

演示如何使用ajax的get方法

使用thinkphp框架操作演示

视图文件
<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script type="text/javascript" src="__PUBLIC__/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function()
        $("#btn").click(function()
            $.get("__URL__/ajax2",'username':"科学家","age":"23岁",function(data)
                $("#box").html(data);
            );
        )
        // alert("asdasd");
        // $.get("__URL__/Index/ajax2",'username':"科学家",function(data))
        //  $("#id").html(data);
        // 
    )
    </script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>

</body>
</html>

控制器

echo "哈哈,我的ajax测试数据返回结果";

        echo "<pre>";
        var_dump($_GET);
        echo "</pre>";

这样子就完成了get 请求

.post的使用方法跟get一样, 只是方法名称不一样

post发送请求

$.post("__URL__/ajax2",'username':"科学家","age":"23岁",function(data)
                $("#box").html(data);
            );
        )

=============后台使用post接收=====================

 public function ajax2()
        echo "哈哈,我的ajax测试数据返回结果";

        echo "<pre>";
        // var_dump($_GET);
        var_dump($_POST);
        echo "</pre>";
    

ajax方法使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script type="text/javascript" src="__PUBLIC__/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function()
        $("#btn").click(function()
            // $.get("__URL__/ajax2",'username':"科学家","age":"23岁",function(data)
            //  $("#box").html(data);
            // );
        // $.post("__URL__/ajax2",'username':"科学家","age":"23岁",function(data)
        //      $("#box").html(data);
        //  );
        // )

        $.ajax(
            'url':"__URL__/ajax2",
            'data':'username':'demo',"age":20,
            'success':function(data)
                    $("#box").html(data);
            ,
            'dataType':"html",
            'type':"post",
            );
        );
    );
    </script>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>

</body>
</html>

以上是关于ajax get,post,ajax基础使用的主要内容,如果未能解决你的问题,请参考以下文章

ajax基础1--使用ajax发送get和post请求

ajax基础3--使用原生xhr发起get,post请求

ajax get post 基础

AJAX基础

AJAX基础

web前端-Ajax基础学习