jQuery --）：AJAX 方法

已于 2023-04-27 17:48:41 修改
阅读量200 收藏
点赞数
分类专栏： AJAX JQUERY NET相关 文章标签： javascript
于 2022-03-29 17:19:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyanqing119/article/details/123826538
版权

1. $.ajax 方法：用于执行 AJAX（异步 HTTP）请求。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.ajax({name:value, name:value, ... })
            //该参数规定 AJAX 请求的一个或多个名称/值对。
            $("#btn_ajax").click(function(){
                $.ajax({
                    url:"Test_ajax.aspx",
                    success:function(result){
                        $("#myDiv1").html(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

---------------------------------------------------------------------------------------------------------

2. $.ajaxSetup() ：为将来的 AJAX 请求设置默认值

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.ajaxSetup({name:value, name:value, ... })
            //该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
            $("#btn_ajax").click(function(){
                $.ajaxSetup({
                    url:"Test_ajax.aspx",
                    success:function(result){
                        $("#myDiv1").html(result);
                    }
                });
                $.ajax();
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

--------------------------------------------------------------------------------------------------

3. $.get() 方法：使用 HTTP GET 请求从服务器加载数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.get(URL,data,function(data,status,xhr),dataType)
            //URL: 必需参数。规定您需要请求的 URL。
            //data:    可选参数。规定连同请求发送到服务器的数据。
            //function(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
            //dataType：可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){
                $.get("Test_ajax.aspx",function(data){
                    alert("数据: " + data );
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

----------------------------------------------------------------------------------------------------------

4. $.getJSON() ：使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_ajax").click(function(){
                //语法格式： $(selector).getJSON(url,data,success(data,status,xhr))
                //url：必需参数。规定将请求发送到哪个 URL。
                //data：可选参数。规定发送到服务器的数据。
                //success(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
                $.getJSON("Test_ajax.aspx",function(result){
                        $("myDiv1").text(result);
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

----------------------------------------------------------------

5. $.getScript() 方法：使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_ajax").click(function(){
                //语法格式： $(selector).getScript(url,success(response,status))
                //url: 必需参数。规定将请求发送到哪个 URL。
                //success(response,status)： 可选参数。规定当请求成功时运行的函数。
                $.getScript("Test_ajax_script.js");
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

-------------------------------------------------------------------------------------

6. $.param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            personObj=new Object();
            personObj.name="xiaohuzi";
            personObj.age=26;
            personObj.web="xiaohuzi.test.com"; 
            //语法格式：$.param(object,trad)
            //object: 必需参数。规定要序列化的数组或对象。
            //trad: 可选参数。布尔值，指定是否使用参数序列化的传统样式。
            $("#btn_ajax").click(function(){
                $("#myDiv1").text($.param(personObj));
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

------------------------------------------------------------------------------------------

7. $.post() 方法：使用 HTTP POST 请求从服务器加载数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)
            //URL: 必需参数。规定将请求发送到哪个 URL。
            //data: 可选参数。规定连同请求发送到服务器的数据。
            //function(data,status,xhr): 可选参数。规定当请求成功时运行的函数。
            //dataType: 可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){
                $.post("Test_ajax.aspx",function(data){
                    alert("Data: " + data );
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

-------------------------------------------------------------------------------

8. ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数。

　ajaxStart() 方法：规定 AJAX 请求开始时运行的函数。

   ajaxSend() 方法：规定 AJAX 请求即将发送时运行的函数。

   ajaxError() 方法：规定 AJAX 请求失败时运行的函数。

   ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数。

   ajaxSuccess() 方法：规定 AJAX 请求成功完成时运行的函数。

   load() 方法：从服务器加载数据，并把返回的数据放置到指定的元素中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式：$(document).ajaxSend(function(event,xhr,options))
            //function(event,xhr,options)     必需。规定当请求成功时运行的函数。
            $(document).ajaxSend(function(){
                $("#myDiv1").css("border","5px solid pink");
            });
            //语法格式：$(document).ajaxStart(function())
            //function(): 必需参数。规定当 AJAX 请求开始时运行的函数。
            $(document).ajaxStart(function(){
                $("#myDiv1").css("display","block");
            });
            //语法格式：$(document).ajaxStop(function())
            //function(): 必需参数。规定所有的 AJAX 请求完成时运行的函数。
            $(document).ajaxStop(function(){
                $("#myDiv1").css("border","3px solid green");
            });
            //语法格式：$(document).ajaxError(function(event,xhr,options,exc))
            //function(event,xhr,options,exc)：必需参数。规定当请求失败时运行的函数。
            $(document).ajaxError(function(){
                $("#myDiv1").css("border","3px solid red");
            });
            //语法格式：$(document).ajaxSuccess(function(event,xhr,options))
            //function(event,xhr,options): 必需参数。规定如果请求成功时运行的函数。
            $(document).ajaxSuccess(function(){
                $("#myDiv1").css("border","3px solid yellow");
            });
            //语法格式：$(document).ajaxComplete(function(event,xhr,options))
            //function(event,xhr,options)： 必需参数。规定当请求完成时运行的函数。
            $(document).ajaxComplete(function(){
                $("#myDiv1").css("display","none");
            });

            //语法格式：$(selector).load(url,data,function(response,status,xhr))
            //url：必需参数。规定您需要加载的 URL。
            //data：可选参数。规定连同请求发送到服务器的数据。
            //function(response,status,xhr)：可选参数。规定 load() 方法完成时运行的回调函数。
            $("#btn_ajax").click(function(){
                $("#txt").load("Test_ajax.aspx");
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

luoyanqing119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery框架：jQuery常用的Ajax方法有哪些?
zy1992As的博客
01-12 281
在表15-12的Ajax操作方法中，$.ajax()是通用方法，通过该方法的setting参数，可以实现与$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。在编写$.ajax()方法时，url是$.ajax()方法的必须参数，它既可以在settings参数之前编写，也可以在settings参数中编写。对于开发者而言，编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同，这也就意味着开发者需要编写额外的代码对浏览器进行测试。
.ajaxComplete()的使用以及详解
小糖豆
01-16 6867
.ajaxComplete()的使用以及详解 先上一段代码： $(document).ajaxComplete(function(event,request, settings){ var EwdFlag =request.getResponseHeader("EwdFlag") if(EwdFlag=="noSession"){ windo
AJAX统一设置头信息
yiyueqinghui的博客
10-24 1417
对于使用ajax统一添加header头信息 $(document).ajaxSend(function(event, jqxhr, settings) { jqxhr.setRequestHeader('Authorization', ’token‘) })
jQuery AJAX 方法
weixin_30780649的博客
06-03 162
jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法： 方法描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 ...
jQuery ajax()方法
anhuang2806的博客
07-25 142
$.ajax()方法： 　　 * 发送data主要有3种方式 * 1.json 数组(推荐1) * 2.url拼接 * 3.表单的序列化serialize(推荐2) (1)json 数组(推荐1) $(function(){ var myClick = function(){ var userName = $().val(); ...
jquery-smartwizard：很棒的jQuery步骤向导插件
02-02
易于实现，Bootstrap兼容性，可自定义的工具栏，主题，事件和Ajax支持是其中的少数功能。 演示版 屏幕截图 要求 （从jQuery-1.11.1 +到最新的jQuery-3.5的支持） 安装 npm install smartwizard yarn add smart...
jquery-ajax-unobtrusive:[维护模式
05-17
jQuery简洁的Ajax jQuery Unobtrusive Ajax库通过添加对通过Ajax调用将HTML替换选项指定为HTML5 data-*元素的支持，对jQuery Ajax方法进行了补充。 该项目是ASP.NET Core的一部分。 您可以在仓库中找到ASP.NET Core...
ajax-jquery-portlet:Ajax Jquery Portlet
07-10
Ajax Jquery Portlet 这个 portlet 是为了帮助那些希望看到 Ajax 在 Liferay Portlet 中使用 JQuery 工作的用户。 在这个 portlet 中，我添加了三个链接，点击后发送请求以获取用户信息并使用 Ajax 在门户上显示它...
jquery-navigate:自动 Ajax 导航
06-13
概述 jQuery Navigate 是一个 jQuery ...以下是将调用 refresh() 方法的元素可以具有的所有可选属性： < div refresh-url =" any-url " refresh-id =" anything you want " refresh-insert-function =" any jque
jquery-ajaxqueuer:ajax队列的jquery插件
07-09
ajax队列是一个数组，由$.ajax方法的配置选项组成($.ajaxQueuer删除和增添一部分)： async Boolean 在$.ajaxQueuer中默认为false，为同步队列，每个请求都需要上一个请求成功才能开始； before(queue
jQuery中$.getJSON的返回值问题
weixin_30633949的博客
07-03 183
在使用$.getJSON获得数据库的返回值后，想将该值return传给其他函数。结果遇到问题。 $.getJSON(url, data, function(result) { return result; }); 结果其他函数使用该值时，一直显示为空。经过搜索（http://stackoverflow.com/questions/31129/ho...
Jquery监听AJAX请求
weixin_30695195的博客
08-18 906
.ajaxComplete() 当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent。 .ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个 Ajax Event。 .ajaxSend() 在Ajax请求发送之前绑定一个要执行的函数，这是一个 Ajax Event. .ajaxStart() 在AJAX 请求刚...
jQuery如何使用ajax()方法？解析和代码示例
u014240783的专栏
03-31 255
ajax()方法在jQuery中用于执行AJAX请求或异步HTTP请求。 语法如下： $.ajax({name:value, name:value, ... }) 参数：可能值的列表如下： type：它用于指定请求的类型。 url：它用于指定将请求发送到的URL。 usrname：它用于指定在HTTP访问认证请求中使用的用户名。 xhr：它用于创建XMLHttpRequest对象。 async：默认值为true。它指示是否应异步处理请求。 beforeSend(xhr)：
关于JQuery.Ajax()的data参数类型
ysds20211402的博客
04-01 317
转自：微点阅读https://www.weidianyuedu.com 假如现在有这样一个表单，是添加元素用的。 <form id="addForm" action="UserAdd.action" type="post"> <label for="uname">用户名</label>：<input type="text" name="uname" id="uname"><br> <label for="mobileIpt"&gt..
Ajax 请求全局事件.ajaxSuccess() .ajaxComplete() .ajaxSend()
d295968572的博客
06-28 3130
jQuery 对于 Ajax 操作提供了很多全局事件方法，.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件，除了这些，还有一些其他全局事件： .ajaxSuccess()，对应一个局部方法：.success()，请求成功完成时执行。 .ajaxComplete()，对应一个局部方法：.complete()，请求完成后注册一个回
jQuery.ajax中success 和complete 区别
热门推荐
zhbitxhd的专栏
08-13 5万+
$.ajax({       type: "post",       url: url,       dataType:'html',       success: function(data) { },      complete: function(XMLHttpRequest, textStatus) { },      error: function(){} }); suc
jQuery学习(四) ---------jQuery中AJAX相关方法
在森林里麋了鹿
11-21 646
目录1. $.ajax()2. $.get()3. $.post() jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。 1. $.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法 语法：$.ajax( { name:value, name:value,
jQuery中$.ajax()方法的使用
sleepwalker_1992的专栏
07-10 4401
$.ajax()方法实现同源数据请求 checkUsername.php <?php $username = $_GET["username"]; if($username == "admin"){ echo "username exists"; }else{ echo "username ok"; } ?> html <!DOCTYPE html> ...
jquery ajax boundary,javascript - AJAX error:
最新发布
06-01
jQuery 的 AJAX 方法中，可以通过设置 contentType 为 false 来禁用默认的 Content-Type 头部，然后手动设置一个合适的 boundary 分隔符。示例代码如下： ``` var formData = new FormData(); formData.append('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值