jQuery 中的 Ajax

最新推荐文章于 2024-07-15 22:52:27 发布
最新推荐文章于 2024-07-15 22:52:27 发布
阅读量628 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53170670
版权

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()

load() 方法

  • load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])

这里写图片描述
* 程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

load() 方法 —- 细节

  • 传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
  • 对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
  • 方法的返回值是 jQuery
  • 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});
var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
  • 使用 serialize() 方法可以自动完成对参数的 url 编码
  • 因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
        <style type="text/css">
            div, span {
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Roman;
            }

            div.mini {
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family: Roman;
            }

            div.visible {
                display: none;
            }
        </style>
        <!--引入jquery的js库-->
    </head>
    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang">
            <br>
            <input type="text" name="psw" id="psw" value="99999">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        <div id="one">
        </div>
    </body>
    <script language="JavaScript">

        $("#b1").click(function(){
            /*
             * load(url,data,callback)
             *      * jquery对象调用load()方法，返回内容会自动写入jquery对象内
             *      * url：请求路径
             *      * data：请求数据，以key/value形式，json数据格式
             *      * callback：回调函数，function(data,textStatus,XMLHttpRequest){}
             *          * data：代表请求返回内容
             *          * textStatus：代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种
             *          * XMLHttpRequest对象
             * 
             *      * load()方法的请求类型：
             *          * 如果客户端没有向服务器端发送请求数据，那么请求类型就是"GET"方式
             *          * 如果客户端向服务器端发送请求数据，那么请求类型就是"POST"方式
             *          * load()方法的请求类型，是根据有没有向服务器端发送数据决定的。
             */
            //构建json数据
            var json = {
                username:$("#username").val(),
                psw:$("#psw").val()
            }

            $("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){
                alert(data);
            });
        });




    </script>
</html>

jsp页面：

<%@ page language="java" pageEncoding="UTF-8"%>
<%

    System.out.println("请求类型：   "+request.getMethod());
    System.out.println("connection server success!");

    System.out.println("username = "+request.getParameter("username"));
    System.out.println("psw = "+request.getParameter("psw"));


    out.println("Hello World!");

%>

结果：
这里写图片描述
这里写图片描述

$.get() (或$.post()) 方法

  • $.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
    这里写图片描述
  • $.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
    方法的返回值:XMLHttpRequest对象
  • $.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
get方法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang"><br>
            <input type="text" name="psw" id="psw" value="99999"><br>
            <input type="button" id="b1" value="登陆">
        </form>

        <div id="one">
        </div>

    </body>
<script language="JavaScript">

            $("#b1").click(function(){

            /*
             * get(url,data,callback,type)
             *      * url：请求路径
             *      * data：请求数据，以key/value形式，json数据格式
             *      * callback：function(data,textstatus){}
             *          * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
             *          * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
             *      * type：返回内容格式，xml, html, script, json, text, _default。
             * 
             *      * 返回值:XMLHttpRequest
             * 
             *      * get()方法无论发送不发送请求数据，请求类型都是"GET"方式
             */
            var json = {
                username:$("#username").val(),
                psw:$("#psw").val()
            }

            $.get("get.jsp",json,function(data,textstatus){
                alert(data);
            });

        });




</script>
</html>

jsp页面:

<%@ page language="java" pageEncoding="UTF-8"%>
<%

    System.out.println(request.getMethod());

    System.out.println("get connection server success!");

    System.out.println(request.getParameter("username"));
    System.out.println(request.getParameter("psw"));


    out.println("Hello World!");

%>

这里写图片描述
这里写图片描述

post方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang"><br>
            <input type="text" name="psw" id="psw" value="99999"><br>
            <input type="button" id="b1" value="登陆">
        </form>

        <div id="one">
        </div>

    </body>
<script language="JavaScript">

//      $("#b1").click(function(){
//          
//          /*
//           * get(url,data,callback,type)
//           *      * url：请求路径
//           *      * data：请求数据，以key/value形式，json数据格式
//           *      * callback：function(data,textstatus){}
//           *          * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
//           *          * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
//           *      * type：返回内容格式，xml, html, script, json, text, _default。
//           * 
//           *      * 返回值:XMLHttpRequest
//           * 
//           *      * get()方法无论发送不发送请求数据，请求类型都是"GET"方式
//           */
//          var json = {
//              username:$("#username").val(),
//              psw:$("#psw").val()
//          }
//          
//          $.get("get.jsp",json,function(data,textstatus){
//              alert(data);
//          });
//          
//      });

        $("#b1").click(function(){

            /*
             * post(url,data,callback,type)
             *      * url：请求路径
             *      * data：请求数据，以key/value形式，json数据格式
             *      * callback：function(data,textstatus){}
             *          * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
             *          * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
             *      * type：返回内容格式，xml, html, script, json, text, _default。
             * 
             *      * 返回值:XMLHttpRequest
             * 
             *      * post()方法无论发送不发送请求数据，请求类型都是"POST"方式
             */
            var json = {
                username:$("#username").val(),
                psw:$("#psw").val()
            }

            $.post("get.jsp",json,function(data,textstatus){
                alert(data);
            });

        });







</script>
</html>

jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%

    System.out.println(request.getMethod());

    System.out.println("post connection server success!");

    System.out.println(request.getParameter("username"));
    System.out.println(request.getParameter("psw"));


    out.println("Hello World!");

%>

这里写图片描述
这里写图片描述

序列化元素

  • jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang"><br>
            <input type="text" name="psw" id="psw" value="99999"><br>
            <input type="button" id="b1" value="登陆">
        </form>

        <div id="one">
        </div>

    </body>
<script language="JavaScript">

//      $("#b1").click(function(){
//          
//          /*
//           * get(url,data,callback,type)
//           *      * url：请求路径
//           *      * data：请求数据，以key/value形式，json数据格式
//           *      * callback：function(data,textstatus){}
//           *          * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
//           *          * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
//           *      * type：返回内容格式，xml, html, script, json, text, _default。
//           * 
//           *      * 返回值:XMLHttpRequest
//           * 
//           *      * get()方法无论发送不发送请求数据，请求类型都是"GET"方式
//           */
//          var json = {
//              username:$("#username").val(),
//              psw:$("#psw").val()
//          }
//          
//          $.get("get.jsp",json,function(data,textstatus){
//              alert(data);
//          });
//          
//      });

        $("#b1").click(function(){

            /*
             * post(url,data,callback,type)
             *      * url：请求路径
             *      * data：请求数据，以key/value形式，json数据格式
             *      * callback：function(data,textstatus){}
             *          * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
             *          * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
             *      * type：返回内容格式，xml, html, script, json, text, _default。
             * 
             *      * 返回值:XMLHttpRequest
             * 
             *      * post()方法无论发送不发送请求数据，请求类型都是"POST"方式
             */
//          var json = {
//              username:$("#username").val(),
//              psw:$("#psw").val()
//          }

            //序列化元素
            var json = $("#form1").serialize();

            $.post("get.jsp",json,function(data,textstatus){
                alert(data);
            });

        });







</script>
</html>
c.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《web开发： jQuery中的Ajax》
yexiangCSDN的专栏
01-28 145
一、jQuery中的Ajax 1.了解jQuery中的Ajax 浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度 jQuery 中发起 Ajax 请求最常用的三个方法如下： $.get() $.post() $.ajax() （其实就是get，post封装） 现阶段只要了解如何get，post，ajax的接口调用就行，后面学完node...
JQuery中的Ajax
零怀念的博客
09-17 466
前言：学过JavaScript原生操作Ajax的都知道，那些操作太繁琐了，而且大多数都是重复的代码，如每次发起Ajax请求都要创建XMLHttpRequest。JQuery封装了Ajax，使得我们操作起来更加简洁。 提交Ajax请求 JQuery.ajax(options)是JQuery Ajax支持的底层实现，该方法返回创建的XMLHttpRequest对象。大部分时候开发者无需理会它返回的...
【精简版】jQuery 中的 Ajax 详解
最新发布
weixin_46485638的博客
07-15 2198
精简的 jQuery 中的 Ajax 详解。
jQuery中的Ajax
weixin_45375510的博客
10-11 4519
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
jquery 中ajax执行的优先级
10-24
3. jQuery中的AJAX方法：jQuery简化了AJAX操作的编程模型，提供了$.ajax、$.get、$.post等方法，可以方便地实现AJAX调用。 4. 回调函数在异步处理中的应用：在异步操作中，回调函数用于指定操作完成后要执行的代码...
JQuery中Ajax的操作完整例子
10-20
本文主要介绍JQuery中Ajax操作的完整实例，包括JQuery中Ajax操作的基本概念和使用方法。同时，还涉及了Java软件开发中后台代码封装的框架、前台页面效果实现所用的JavaScript以及jQuery的优势，最后提出了处理大数据...
jQuery中Ajax的load方法详解
12-09
先来看一个Ajax例子 代码如下: <!DOCTYPE html> <html> <head lang=”en”>  <meta charset=”UTF-8″>  <title></title> </head> <body> <input type=”button...
jQuery中ajax请求后台返回json数据并渲染HTML的方法
10-18
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式，它的作用是使得页面无需重新加载即可向服务器请求数据，并将数据动态地加载到页面中。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
jquery中ajax学习笔记3
10-28
### jQuery中AJAX的学习笔记3 本部分的知识点主要集中在使用jQuery封装的AJAX方法来接收服务器端以XML格式返回的数据。在这一阶段的学习中，我们假设XML数据的接收是在已有的Web应用环境下进行，其中包括服务器端和...
jQuery中的AJAX
qq_51781439的博客
09-12 919
一、什么是 AJAX？ AJAX 并非编程语言，简短地说，AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，通过后台加载数据，实现了对部分网页的更新。 和常规的 AJAX 代码不同，jQuery为我们将原生AJAX进行了封装，现在我们只需要一行简单的代码，就能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 二、jQuery 底层 AJAX 请求 底层ajax请求使用ajax
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
jquery中的ajax方法详解
想作会飞的鱼的博客
04-24 1164
jquery中的ajax方法参数含义如下： 1.url:  要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type:  要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout:  要求为Number类型的参数，设置请求超时时间
jQuery-Ajax（详解）
sunshao904
05-30 2万+
安装Web环境 Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。 jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 一、 load( ) 方法 结构load( url , [data] , [callback] ) 参数解释 捕获.PNG 1.1 应用 1.1.1首先构建一
jQuery-Ajax 详解
m0_48982503的博客
12-14 1万+
一、什么是Ajax Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。 二，jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 ...
Ajax和JQuery
chenjia的博客
04-06 1万+
Ajax简介 Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步 ，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是...
jquery中ajax的使用
09-30
jQuery中的ajax用于通过异步HTTP请求与服务器进行数据交互。它可以用于向服务器发送请求并接收响应，以更新网页内容而无需刷新整个页面。使用jQuery中的ajax，你可以通过以下几个方面来实现： 1. 基本使用：通过调用$.ajax()函数来发送HTTP请求，并在成功或失败时执行相应的回调函数来处理响应。你可以指定请求的URL、请求类型（GET、POST等）、数据类型（JSON、XML等）、请求参数、请求头等信息。 2. 回调事件：在ajax请求的不同阶段，可以注册各种回调函数来执行特定的操作。例如，你可以使用ajaxStart()和ajaxStop()函数来在ajax请求开始和结束时执行相应的操作，比如显示和隐藏加载提示。 3. 高度封装函数：除了使用基本的$.ajax()函数，jQuery还提供了一些高度封装的函数，比如$.get()、$.post()、$.getJSON()等，用于简化常见的ajax请求操作。 4. 全局事件：jQuery还提供了一些全局事件，比如ajaxStart、ajaxStop等，可以在整个文档对象上注册，当有ajax请求发生时触发相应的事件。 以上是jQuery中ajax的基本使用和相关特性。通过这些功能，你可以更方便地进行异步数据交互，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值