jQuery Ajax 教程

最新推荐文章于 2024-08-01 15:56:04 发布
最新推荐文章于 2024-08-01 15:56:04 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： AJax全接触 Jquery知识库 JavaScript 文章标签： jquery jquery ajax load ajax get
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itguangit/article/details/76451702
版权

jQuery Ajax

**jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。**

jQuery AJAX 方法

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

下面是常用的 jQuery AJAX 方法

jQuery ajax() 方法

执行异步 AJAX 请求

定义和用法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

使用 AJAX 请求改变

元素的文本： 

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});

下面的表格中列出了可能的名称/值：

这里写图片描述

jQuery - AJAX load() 方法

**jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。**

load()方式是对jquery对象进行操作的。

语法:

$(selector).load(url,data,function(response,status,xhr))

这里写图片描述

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示”外部内容加载成功！”，而如果失败，则显示错误消息：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据

  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

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

语法：

$.get(URL,data,function(data,status,xhr),dataType)

这里写图片描述


<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("数据: " + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>
jQuery $.post() 方法

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

语法:

$(selector).post(URL,data,function(data,status,xhr),dataType)

这里写图片描述

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

jQuery getJSON() 方法

使用 HTTP GET 请求从服务器加载 JSON 编码的数据

语法

$(selector).getJSON(url,data,success(data,status,xhr))

这里写图片描述

PostTruth
关注
专栏目录
jquery ajax教程.docx
12-25
jQuery AJAX 是一个强大的JavaScript库，它简化了网页与服务器之间的数据交互。在本文中，我们将深入探讨jQuery中的AJAX方法，包括`load()`、`jQuery.get()`和`jQuery.post()`，以及它们的基本用法和参数。 1. `...
Ajax入门教程
qq_22075913的博客
03-31 5378
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
ajax的使用步骤详解
哈哈
04-07 2425
1、引言 就是异步刷新，AJAX要和XMLHttpRequest对象、JavaScript/DOM、CSS、XML一起使用 2、XMLHttpRequest对象 XMLHttpRequest对象，异步的与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 XMLHttpRequest对象是ajax的基础 语法 var xhr = new XMLHttpRequest(); 2.1 语法格式 如需将请求发送到服务器，使用XMLHttpRequest()对象的open()、se
jQuery入门（五）Ajax和json
最新发布
kong7906928的博客
08-01 1330
Ajax使用 和 json简介
AJAX 教程---菜鸟教程
yitong的博客
05-25 2193
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。什么是 AJAX？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。AJAX 工作原理。
javascript进击（七）Ajax
dianqueshi9054的博客
01-04 278
AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX 是一种用于创建...
从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法
weixin_56242678的博客
05-27 1万+
本文将会介绍 AJAX 的原理和使用方法，并帮助你在短时间内掌握这一重要的前端技术。我们将从 AJAX 的基本概念入手，深入探讨 AJAX 的核心技术——XMLHttpRequest 对象以及常用的数据交互方式。通过本文的学习，你将能够轻松地了解 AJAX 的工作方式和应用场景，从而为你的 Web 应用程序添加更多的交互性和实时性。
codeschool jquery ajax 教程
08-28
### 关于Codeschool jQuery AJAX教程的关键知识点 #### 1. AJAX基本概念 - **定义**：AJAX（Asynchronous JavaScript and XML）是一种客户端技术，用于与Web服务器进行通信。 - **工作原理**： - 用户触发一个事件...
Jquery ajax基础教程
10-23
在本教程中，我们将学习如何使用jQuery的Ajax方法来加载不同类型的文件数据，这些文件数据包括HTML、JSON、JavaScript和XML文件。实现这一点的关键是通过使用jQuery库提供的方法：load、getJSON、getScript和get。 ...
AJAX 详解
m0_61869253的博客
02-17 1278
怎样创建xmlHttpRequest对象？怎样通过get、post传递传递数据？怎样控制http头信息？通过ajax能传递什么格式的数据？怎样接收服务器传递的数据？怎样控制数据接收的进度？如果控制数据传递过程中的错误？关于跨越传输的问题？a. AJAX是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
【AJAX 教程】Jquery 实现 AJAX 请求的三种方式
我的博客
05-23 3749
Jquery 实现 AJAX 请求的三种方式 目录 Jquery 实现 AJAX 请求的三种方式 简介 项目准备 $.get()方法 $.post()方法 $.ajax()方法 项目演示 相关文章【AJAX 教程】JS 原生 AJAX 请求 简介 JQuery 脚本库里所提供的 AJAX 提交的方法有很多，但主要的方法有 $.get(), $.post(), $.ajax()。其中 $.ajax() 是前两种方法的底层实现，可以提供比前两者更多的属性与参数设置，如果需要高级的...
jQuery Ajax 详细通俗讲解
热门推荐
lucien_ma的博客
08-25 2万+
jQuery Ajax Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。 同步： 现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。 异步： 异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。 刷新： 类似我们的 <a></a>标签的点击链接，以及表单元素的提交，都会刷新页面
Ajax 完整教程
Gerry的专栏
08-13 2017
Ajax 完整教程第 1 页 Ajax 简介Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpR
AJAX（详细解析步骤）
qq_59541478的博客
08-29 583
它是一种创建交互式网页应用的网页开发技术。
Ajax实战指南：快速入门
会思想的苇草i的博客
01-15 1764
前端开发中，Ajax是一种用于异步请求和更新网页内容的技术。通过Ajax，可以在不刷新整个页面的情况下，与服务器进行数据交互。这种技术使得用户能够更加流畅地浏览网页，并实现实时更新数据的功能。在前端开发中，掌握Ajax技术对于实现动态交互和提升用户体验非常重要。
Ajax入门到精通
weixin_47750287的博客
03-08 2016
本文介绍了Ajax的概念，四种发送Ajax请求的方式，三种解决Ajax请求跨域的方案。
js-AJAX
qq_43975332的博客
09-08 206
AJAX AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 谈谈Ajax AJAX是异步的
ajax教程
ning_xiao_xuan的博客
04-04 1732
ajax教程
jquery ajax教程
05-16
jQuery是一个流行的JavaScript库，它提供了...2. W3Schools jQuery AJAX教程：https://www.w3schools.com/jquery/jquery_ajax_intro.asp 3. jQuery教程-菜鸟教程：https://www.runoob.com/jquery/jquery-tutorial.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值