微信扫一扫打赏支持

js进阶 14-6 $.ajax()方法如何使用

js进阶 14-6 $.ajax()方法如何使用

打赏

 

一、总结

一句话总结：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

 

1、$.ajax()的特点是什么（和$.get()、$.post()的区别是什么）？

$.get,$.post为$.ajax()的封装

 

 

2、$.ajax()方法的参数是什么形式？

键值对

 

  • 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

    参数

    1. 第一个参数是我们希望请求的URL;
    2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
  • 常用参数：
    1. url默认值：当前页地址。发送请求的地址。
    2. type请求方式(“POST”或”GET”),默认为”GET”。
    3. Success类型：Function请求成功后的回调函数。
    4. error请求失败时调用此函数。
    5. .........

 

16 <script type="text/javascript">
17     $(function(){
18         $('#btn').click(function(){
19             $.ajax({
20                 type:'POST', //默认为GET方式提交
21                 url:'testPost0.php',
22                 data:{password:'123456'},
23                 success:function(responseTxt,statusTxt,xhr){
24                     alert(responseTxt)
25                 },
26                 error:function(){
27                     alert('加载失败')
28                 }
29             })
30         })
31     })
32 </script>

 

 

 

二、$.ajax()方法如何使用

1、相关知识

$.ajax()

$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。

  • 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

    参数

    1. 第一个参数是我们希望请求的URL;
    2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
  • 常用参数：
    1. url默认值：当前页地址。发送请求的地址。
    2. type请求方式(“POST”或”GET”),默认为”GET”。
    3. Success类型：Function请求成功后的回调函数。
    4. error请求失败时调用此函数。
    5. .........
 

 

2、代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <input type="button" id="btn" value="Ajax测试">
15     <div id="test"></div>
16 <script type="text/javascript">
17     $(function(){
18         $('#btn').click(function(){
19             $.ajax({
20                 type:'POST', //默认为GET方式提交
21                 url:'testPost0.php',
22                 data:{password:'123456'},
23                 success:function(responseTxt,statusTxt,xhr){
24                     alert(responseTxt)
25                 },
26                 error:function(){
27                     alert('加载失败')
28                 }
29             })
30         })
31     })
32 </script>
33 </body>
34 </html>
复制代码

 

 

 

 
posted @   范仁义  阅读(1313)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
历史上的今天：
2017-07-20 L2-002. 链表去重
2017-07-20 L2-003. 月饼
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手