jQuery学习笔记之jQuery的Ajax(3)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址:https://github.com/iyun/jQueryDemo.git———————————————————————————— 6.0 jQuery ajax 浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。 js代码发送一个ht

jQuery学习笔记之jQuery的Ajax(3)
6.jQuery的Ajax插件

源码地址:

https://github.com/iyun/jQueryDemo.git

————————————————————————————
6.0 jQuery ajax
浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。
js代码发送一个http的请求
XMLHttpRequest的四步:创建对象、注册监听、建立连接、发送数据

异步交互的6个方法(发送http请求)
ajax();(最底层)
get(),post(),load();(底层)
getScript(),getJSON;(上层)

$.get() (或$.post()) 方法
1、`$.get()` 方法使用 GET 方式来进行异步请求. 它的结构是: `$.get(url[, data][, callback][, type]);`
2、$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
3、方法的返回值:XMLHttpRequest对象
4、$.get()  和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法

load()方法
1、load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。
2、它的结构是: load(url[, data][,callback])
3、程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
4、传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
5、对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
6、方法的返回值是 jQuery
7、如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)

$.getScript()方法
1、有时候,在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时,动态创建

 <body>
     <br/>
     <p>
         <input type="button" id="send" value="加载"/>
     </p>

    <div  class="comment">已有评论:</div>
     <div id="resText" >

     </div>
  </body>
  <script language="JavaScript">
   $(function(){
        $('#send').click(function() {
             $.getScript('test.js',function(){
                $('#resText').html(html);
             });
        });
   })
  </script>

$.getJSON()方法

 <body>
     <br/>
     <p>
         <input type="button" id="send" value="加载"/>
     </p>

    <div  class="comment">已有评论:</div>
     <div id="resText" >

     </div>
  </body>
  <script language="JavaScript">
   $(function(){
        $('#send').click(function() {
             $.getJSON('test.json', function(data) {
                 $('#resText').empty();
             var html = '';
             $.each( data  , function(commentIndex, comment) {
                 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                  })
                 $('#resText').html(html);
            })
       })
   })
  </script>

序列化元素
1、在客户端与服务器端进行通信时,常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时,处理比较方便。但在真实项目中,往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。
2、serialize()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为字符串。方便客户端发送请求。
3、serializeArray()方法
该方法作用于一个jQuery对象,可以将DOM元素内容序列化为JSON数据格式。
注:此方法返回的是JSON对象而非JSON字符串。

JQuery 加载并解析 XML
1、JQuery 可以通过 $.get()$.post() 方法来加载 xml.

    $(function(){
        $.get("cities.xml",function(xml){
            alert(xml);
        });
    })
2、JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
目录
相关文章
|
5月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
232 1
|
6月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
59 1
|
6月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
6月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
39 1
|
7月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
51 0
|
7月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
442 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
7月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
7月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
79 13
|
9月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
74 0
|
9月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作