提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

129.JQuery中使用AJAX

jQueryAJAX 使用 129
2023-09-27 14:23:04 时间 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery中使用AJAX</title>
    <!-- 网络导入jQuery -->
    <script src="http://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
    <h1>JQuery中使用AJAX</h1>
    <input type="button" value="发送get请求" onclick="test_get()">
    <input type="button" value="发送post请求" onclick="test_post()"><br>
    <input type="button" value="发送get请求json" onclick="test_get_args_json()">
    <input type="button" value="发送get请求str" onclick="test_get_args_str()"><br>
    <input type="button" value="发送post请求json" onclick="test_post_args_json()">
    <input type="button" value="发送post请求str" onclick="test_post_args_str()">
    <input type="button" value="发送post请求放入data" onclick="test_post_json()"><br>
    <input type="button" value="发送请求之前beforesend" onclick="test_beforsend()"><br>
    <script>
        // get请求访问
        function test_get() {
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // post请求访问
        function test_post() {
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // json形式传递
        function test_get_args_json() {
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                // 传递请求参数，会自动拼接 ： "url": "http://httpbin.org/get?name=sxt&pwd=123"
                data:{
                    name:'sxt',
                    pwd:123
                },
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // str形式传递
        function test_get_args_str() {
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                // 传递请求参数，会自动拼接 ： "url": "http://httpbin.org/get?name=sxt&pwd=123"
                data:'name=sxt&pwd=123',
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // json形式传递
        function test_post_args_json() {
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                // 同下，会隐藏请求参数，显示在form中
                //form: {name: 'sxt', pwd: '123'} url: "http://httpbin.org/post"
                data:{
                    name:'sxt',
                    pwd:123
                },
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // str形式传递
        function test_post_args_str() {
            $.ajax({
                type:'url: "http://httpbin.org/post"',
                url:'http://httpbin.org/post',
                data:'name=sxt&pwd=123',
                success:(data)=>{
                    console.log(data);
                }
            })
        }

        // 默认情况下data数据放在form下，把data数据以json格式放入data中
        function test_post_json() {
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                data:JSON.stringify({
                    name:'sxt',
                    pwd:123
                }),
                contentType:'application/json',
                success:(data)=>{
                    console.log(data);
                }
            })
        }
    
        function test_beforsend() {
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                // 传递请求参数，会自动拼接 ： "url": "http://httpbin.org/get?name=sxt&pwd=123"
                data:{
                    name:'sxt',
                    pwd:123
                },
                success:(data)=>{
                    console.log(data);
                },
                beforeSend:()=>{
                    console.log("这是发送请求之前先处理的内容");
                    // 可以在此函数中控制传送内容，若返回的是false将不会发送请求
                    return false
                }
            })
        }
    </script>
</body>
</html>

相关文章