jQuery发送Ajax请求的几种方法示例

已于 2025-06-27 14:56:50 修改
阅读量1k 收藏 8
点赞数 11
CC 4.0 BY-SA版权
文章标签： jquery ajax okhttp
于 2025-05-14 15:09:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147954886

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Ajax方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .method {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <h1>jQuery发送Ajax请求的几种方法</h1>
    
    <div class="method">
        <h2>1. $.ajax() 方法</h2>
        <p>这是jQuery中最基础的Ajax方法，可以完全自定义请求。</p>
        <button id="ajaxGet">发送GET请求</button>
        <button id="ajaxPost">发送POST请求</button>
        <div class="result" id="ajaxResult"></div>
    </div>
    
    <div class="method">
        <h2>2. $.get() 方法</h2>
        <p>简化的GET请求方法。</p>
        <button id="getBtn">发送GET请求</button>
        <div class="result" id="getResult"></div>
    </div>
    
    <div class="method">
        <h2>3. $.post() 方法</h2>
        <p>简化的POST请求方法。</p>
        <button id="postBtn">发送POST请求</button>
        <div class="result" id="postResult"></div>
    </div>
    
    <div class="method">
        <h2>4. $.getJSON() 方法</h2>
        <p>专门用于获取JSON数据的GET请求。</p>
        <button id="getJsonBtn">获取JSON数据</button>
        <div class="result" id="getJsonResult"></div>
    </div>
    
    <div class="method">
        <h2>5. $.load() 方法</h2>
        <p>从服务器加载数据并将返回的HTML放入匹配的元素中。</p>
        <button id="loadBtn">加载HTML内容</button>
        <div class="result" id="loadResult"></div>
    </div>
    
    

    <script>
        $(document).ready(function() {
            // 1. $.ajax() 方法示例
            $("#ajaxGet").click(function() {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $("#ajaxResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
                    },
                    error: function(xhr, status, error) {
                        $("#ajaxResult").html("请求失败: " + error);
                    }
                });
            });
            
            $("#ajaxPost").click(function() {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts",
                    type: "POST",
                    data: {
                        title: "foo",
                        body: "bar",
                        userId: 1
                    },
                    dataType: "json",
                    success: function(data) {
                        $("#ajaxResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
                    },
                    error: function(xhr, status, error) {
                        $("#ajaxResult").html("请求失败: " + error);
                    }
                });
            });
            
            // 2. $.get() 方法示例
            $("#getBtn").click(function() {
                $.get("https://jsonplaceholder.typicode.com/posts/2", function(data) {
                    $("#getResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
                }).fail(function() {
                    $("#getResult").html("请求失败");
                });
            });
            
            // 3. $.post() 方法示例
            $("#postBtn").click(function() {
                $.post("https://jsonplaceholder.typicode.com/posts", {
                    title: "测试标题",
                    body: "测试内容",
                    userId: 2
                }, function(data) {
                    $("#postResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
                }).fail(function() {
                    $("#postResult").html("请求失败");
                });
            });
            
            // 4. $.getJSON() 方法示例
            $("#getJsonBtn").click(function() {
                $.getJSON("https://jsonplaceholder.typicode.com/posts/3", function(data) {
                    $("#getJsonResult").html("文章标题: " + data.title + "<br>内容: " + data.body);
                }).fail(function() {
                    $("#getJsonResult").html("请求失败");
                });
            });
            
            // 5. $.load() 方法示例
            $("#loadBtn").click(function() {
                // 注意：由于同源策略限制，这里使用一个示例HTML片段
                // 实际使用时应该加载同源的HTML文件
                $("#loadResult").load("https://jsonplaceholder.typicode.com/posts/4 #dummy", function(response, status, xhr) {
                    if (status == "error") {
                        $("#loadResult").html("无法加载内容。这是一个模拟示例，实际使用时应加载同源HTML文件。");
                    }
                });
            });
        });
    </script>
</body>
</html>

ziblog
关注
Ajax请求实例
qq_31878547的博客
05-17 1824
什么是Ajax请求？ AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。 Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容 原生 AJAX 请求的示例： <script type="text/javascript"> // 在这里使用 javaScript 语言发起 Ajax 请求
JQuery发送AJAX请求
gcsyzy的博客
04-01 1753
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
JQuery中使用Ajax请求的四种方法
# Never Give up &
10-18 2034
1. 什么是AJAX? AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX的实际意义是，不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。 AJAX也可以简单的理解为通过JS向服务器发送请求。 AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流...
Ajax请求数据小实例
10-18
使用Ajax get请求数据的小例子，使用$.each()循环显示到表格，里面有接口，大家可以使用，欢迎指导学习
jQuery发送Ajax请求
Bruce Tu的专栏
07-02 493
1. 异步请求方式$.ajax({ url : 'your url', data:{name1:value2,name2:value2}, cache : false, async : true, type : "POST", dataType : 'json/xml/html', success : function (res
ajax请求例子
qq_19865223的博客
03-09 1382
原始ajax &lt;script type="text/javascript"&gt; //当页面加载完毕之后，执行以下代码 window.onload = function(){ /* * 1 创建XMLHttpRequest对象 */ var xhr = ajaxFunction(); ...
jQuery 发送ajax请求
dinan9786的博客
01-10 251
写在前面的话： 　　利用jQuery 的 ajax() 方法通过 HTTP 请求加载远程数据 是非常简便的，也是常用的功能。W3school网上的资料（里边有各个参数的介绍） 1.常用写法： $.ajax({ url:'test.php', type:'POST', // 默认为GET data:{ name:'xy',　　　　age:...
JQuery实现Ajax加载图片的方法
10-23
`$.ajax()`提供了更多的配置选项，如设置超时时间、处理错误等，更适用于复杂场景下的Ajax请求。 #### 9. 兼容性问题的调试方法 针对不同浏览器的兼容性问题，除了常规的测试外，文档中提到的一种调试方法是查看...
jQuery ajax serialize() 方法使用示例
10-25
具体的，我们可以看到示例中的表单包含了几种不同类型的输入元素： - `<input type="text">`：文本输入框，用于输入文本类型的数据。 - `<input type="hidden">`：隐藏输入框，它的值不会显示在表单界面上，但会随...
实现jQuery Mobile AJAX跨域请求的实用示例
为了解决跨域请求问题，有几种常见的策略： - JSONP（JSON with Padding）：通过动态创建script标签的方式请求数据，服务端返回数据时需要按照JSONP格式包装起来。 - CORS（跨源资源共享）：通过在HTTP响应头中添加...
jQuery使用ajax跨域请求获取数据
12-10
对于跨域，jQuery提供了几种方式来处理，其中`dataType: "jsonp"`是最常用的一种，因为JSONP不受同源策略限制。JSONP（JSON with Padding）是一种通过动态插入`<script>`标签来绕过同源策略的手段。然而，在上述代码...
Ajax异步请求简单示例
03-23
Ajax实现异步请求的示例 直接部署就可以运行 页面内局部刷新
通过XMLHttpRequest和jQuery实现ajax的几种方式
10-23
本文将详细介绍如何使用XMLHttpRequest和jQuery实现AJAX请求。 首先，我们来看一个简单的使用XMLHttpRequest实现AJAX的例子。在HTML中，我们有一个按钮，当用户点击时，会触发AJAX请求获取当前时间并显示在文本框中...
Ajax请求示例
weixin_46482875的博客
05-11 3943
Ajax请求步骤与代码 前端 文章标签： ajax jquery ...
[Jquery]发送Ajax请求
沧白
04-20 375
ajax方式$.ajax({ async:false, // false为同步, true为异步 type:"POST", url:"/entity/recruit/recSiteStuManage_checkPrpmsExist.action", dataType:"json", data:{ 'studentId':studentId,
jQuery发送一个ajax请求
Makta
03-09 478
jQuery 发送一个 ajax 请求 jQuery里面帮我们封装好了几个方法，专门用来发送 ajax 请求的。 $.get() :专门用来发送 get 请求的 $.post() :专门用来发送 post 请求的 $.ajax() :发送什么请求都可以(get, post, put, delete)，并且还可以发送一个 jsonp 请求 jQuery 发送一个 GET 请求 语法: $.get...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值