[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax

最新推荐文章于 2022-10-05 01:06:56 发布
最新推荐文章于 2022-10-05 01:06:56 发布
阅读量179 收藏
点赞数 2
分类专栏： # 全面掌握Ajax 文章标签： ajax jQuery html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeathDomain/article/details/108392479
版权

jQuery中的Ajax

参考文档

 

jQuery中的Ajax

  • 六个Ajax操作方法

    • load()方法
    • $.get()方法
    • $.post()方法
    • $.ajax()方法
    • $.getScript()方法
    • $.getJSON(方法

  • 六种事件

    • ajaxStart()

    • ajaxStop()事件

    • ajaxComplete()事件

    • ajaxSend()事件

    • ajaxError()事件

    • ajaxSuccess()事件

 

load()方法

load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。

  • load(url,data,callback）方法
    • 参数
      • url - 异步请求的地址
      • data - 异步请求的数据
        • 如果省略请求数据的话，当前的请求方式为GET
        • 如果发送请求数据的话，当前的请求方式为POST
      • callback - 异步请求成功后的回调函数
    • 返回值 - 服务器响应的结果
    • 注意 - 自动将返回结果写入到目标元素中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>
    $('button').click(function () {
 	$('button').load('./data./server2.txt',{name:'张无忌'},function () {
            console.log('异步请求成功');
        })
    })
</script>
</body>
</html>

 

$.get()方法与 $.post()方法
  1. $.get()方法使用get方式向服务器端发送异步请求
  2. $.post()方法使用POST方式向服务器端发送异步请求
  • $.get(url,data,callback,type）方法 -- 请求方式为GET
$.post(url,data,callback,type）方法
    • 参数
      • url - 异步请求的地址
      • data - 异步请求的数据
      • callback - 异步请求成功后的回调函数
      • type - 设置服务器满响应结果的格式
        • 值为xml、html、script、json、text和default
    • 返回值 - 服务器响应的结果
    • 注意 - 自动将返回结果写入到目标元素中

    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>

    $('button').click(function () {
        $.get('data/server2.json',{name:'张无忌'},function (response) {
            console.log(response);
        },'json')

        $.post('data/server2.json',{name:'张无忌'},function (response) {
            console.log(response);
        },'json')
    })
</script>
</body>
</html>

 

$.ajax()方法

$.ajax(方法是jQuery中最为底层的Ajax方法

  • $.ajax(url,[settings]）
    • 参数
      • url-异步请求的地址
      • settings - 设置异步请求的参数
    • settings选项 - 对象类型
      • type - 设置请求方式
      • data - 发送给服务器端的请求数据
      • dataType - 服务器端响应结果的格式
      • success - 异步请求成功后的回调函数
        • function(data,textStatus,jqXHR){}
          • data - 表示服务器端响应的结果
          • textStatus - 表示服务器端当前的状态
          • jqXHR - Ajax中的核心对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>

    $('button').click(function () {
        $.ajax('data./server2.json', {
            type : 'get',
            dataType : 'text',
            success:function (data) {
                console.log(data);
            }
        })
    })
</script>
</body>
</html>

 

$.getSacipt()方法

$.getScript方法是jQuery中用于动态加载指定JavaScript文件 – 目的就是提升js文件加载的速度

  • $.getScript(url,[callback]);
    • url请求
      • JavaScript文件的ul地址。
    • callback
      • 指定JavaScript文件成功加载后的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>

    $('button').click(function () {
        // 动态加载指定JavaScript文件，并且执行
       $.getScript('./data/server3.js',function (data) {
           console.log(data);
           eval(data)
       })
    })
</script>
</body>
</html>

 

$.get.JSON()方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容 – 请求只能用GET

  • $.getJSON(url,[data],[callback]);
    • url
      • 请求JavaScript文件的url地址。
    • data
      • 发送给服务器端的key/value形式的数据内容。
    • callback
      • 指定JavaScript文件成功加载后的回调函数。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>

    $('button').click(function () {
        // getJSON（）方法的请求方式为GET
        $.getJSON('./data/server2.json',{name:"张无忌"},function (data) {
            console.log(data)
        })
    })
</script>
</body>
</html>
^ω^奋斗小青年
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery ajax方法详解
阿休要努力
07-01 718
jquery中的ajax ★: $.get(url,params,function(数据){},type); 发送get请求的ajax url:请求的路径 params:请求的参数 参数为key\value的形式 key=value {"":"","":""} fn:回调函数 参数就是服务器发送回来...
Jquery-Ajax-CRUD-PHP中的操作
02-02
**jQuery、Ajax与PHP在CRUD操作中的应用** 在Web开发中，CRUD（Create, Read, Update, Delete）是数据库操作的基本要素。利用jQuery、Ajax和PHP的组合，可以实现无刷新页面的动态数据交互，提升用户体验。下面将...
JQuery中ajax的相关方法
weixin_33962621的博客
03-15 177
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery AJAX 方法
weixin_30780649的博客
06-03 164
jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法： 方法描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 ...
jQuery之ajax实现篇
aikouhui4965的博客
01-05 122
　　jQuery的ajax方法非常好用，这么好的东西，你想拥有一个属于自己的ajax么？接下来，我们来自己做一个简单的ajax吧。 实现功能 由于jq中的ajax方法是用了内置的deferred模块，是Promise模式的一种实现，而我们这里没有讲过，所以我们就不使用这一模式啦。 我们只定义一个ajax方法，他可以简单的get，post，jsonp请求就可以啦~~ var a...
jquery对ajax的支持
weixin_34289454的博客
05-20 132
前面详细介绍的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html，是采用纯js的方式来实现的，这样有助于我们对底层XMLHttpRequest的实现的了解，但也有缺点就是创建会比较的麻烦并且不够果断 今天就来说说jquery对于ajax的支持，jquery封装了XMLHttpReq...
jQuery-ajax-用户名异步请求
10-21
在“jQuery-ajax-用户名异步请求”这个场景中，我们可能是在设计一个注册或登录界面，需要在用户输入用户名时实时检查该用户名是否已被占用。这个过程可以通过Ajax调用后台接口实现，避免用户频繁提交表单进行检查。...
如何从jQuery的ajax请求中删除X-Requested-With
10-26
在Web开发中，jQuery的AJAX功能是一种广泛使用的异步数据通信技术，它允许开发者在不刷新整个页面的情况下与服务器交换数据。`X-Requested-With`是jQuery AJAX请求中一个默认设置的HTTP头字段，通常其值为`...
jquery-ajax.zip_php ajax jquery
09-22
在本教程中，我们将学习如何利用jQuery的$.ajax()方法来发起AJAX请求。 接下来，我们转向PHP。这是一种服务器端脚本语言，常用于处理来自客户端的数据，如HTML表单提交。在与AJAX结合时，PHP可以接收并处理由jQuery...
Asp+Ajax(Jquery)实用例子-Asp
06-14
Ajax是目前比较流行的网站建设技术，尤其作为网站建设者来说，掌握它十分有必要，如果用原生Javascript开发则比较困难，还好有强大的Jquery加持，开发则变的十分简单和容易。 目前来说用ASP写的网站还是很多的，但...
用jquery实现ajax请求,用jQuery实现Ajax
weixin_42554162的博客
08-05 817
前置知识：ajax原理，json字符串进行信息传递。Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。一、jquery.ajax()jqu...
jquery中的ajax使用
最新发布
qq_46023503的博客
10-05 2118
jquery中的ajax使用
jquery的ajax操作
m0_50147069的博客
08-13 122
ajax()方法 可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较高灵活性。 $.ajax( [settings] ); //参数 settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合; $.ajax({ url:请求地址 type:"get | post | put | delete " 默认是get, data:请求参数 {"id":"123","pwd":"123456"}, dataType:请求数据类型".
jQuery中的Ajax操作
diligentkong的博客
06-03 5103
jQuery对Ajax操作进行了封装，常用的方法包括 $.get(),$.post(),$.ajax()。 分别对其进行介绍$.get() $.get()方法使用GET方式来进行异步请求。 $.get()结构 $.get(url,[. data][. callback][. type]) $.get()方法参数解释 参数名称 类型 说明 url String 请求的HTML页的url地址 data
JQuery中AJAX的操作
weixin_30649641的博客
05-24 89
提交ajax请求 $.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } }); $.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 ...
jquery的ajax方法
DHASA的博客
02-20 722
1、jquery的ajax异步调用的方法形式： jQuery.ajax({ url : url, type : 'POST', data : JSON.stringify(param), dataType : 'json', contentType : 'application/json;charset=UTF-8'
JQuery的ajax方法
Ayangdaye的博客
11-15 842
首先，要了解什么是ajax。 通俗来说，就是前段用来请求后端数据的方式。那么。源生js和jq的方法的不同，通过以下来演示。 先来看普通ajax请求方式： 分为四步，且返回数据类型不可控。 接下来看jq带来的ajax请求方法： 第一步：引入jq 以及编写html及css样式、 第二步：写点击按钮请求ajax 【注意】：dataType: "jsonp"...
jQuery的ajax方法
qq_45702658的博客
09-29 524
jQuery的ajax方法 ajxa方法 url 表示请求的地址 type 表示请求的类型 data 表示发送服务器的数据 格式有两种： 一、name=value&name=value 二、{key:value} success 请求成功，响应的回调函数 dataType 响应的数据 常用的数据类型有text 表示纯文本、xml 表示xml数据、json 表示json数据 <!DOCTYPE html> <html lang="en"> <head&g
jQuery与Ajax基础教程 - 传智播客教育
"传智播客的jQuery与AJAX教程PPT内容，涵盖了JavaScript库的作用、jQuery的介绍、jQuery的基本使用、jQuery对象与DOM对象的转换等核心知识点。" 在Web开发领域，JavaScript库扮演着至关重要的角色，它们极大地简化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值