jQuery 中的 Ajax

最新推荐文章于 2024-10-12 11:10:30 发布
原创 最新推荐文章于 2024-10-12 11:10:30 发布 · 698 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #ajax

本文详细介绍了jQuery中的Ajax操作，包括load(), $.get() 和 $.post() 方法的使用方式及回调函数的处理，同时还讲解了如何利用serialize()方法简化数据传递。

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.
关注
专栏目录
《web开发： jQuery中的Ajax》
yexiang优快云的专栏
01-28 253
一、jQuery中的Ajax 1.了解jQuery中的Ajax 浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度 jQuery 中发起 Ajax 请求最常用的三个方法如下： $.get() $.post() $.ajax() （其实就是get，post封装） 现阶段只要了解如何get，post，ajax的接口调用就行，后面学完node...
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
11-27
jquery中ajax请求后台数据成功后既不执行success也不执行error，此外系统报错：Uncaught SyntaxError: Unexpected identifier at Object.success，但后台能够返回数据，原代码如下： var source=[]; $.ajax({ ...
【精简版】jQuery 中的 Ajax 详解
热门推荐
weixin_46485638的博客
07-15 1万+
精简的 jQuery 中的 Ajax 详解。
jQuery中的AJAX
qq_51781439的博客
09-12 1058
一、什么是 AJAX？ AJAX 并非编程语言，简短地说，AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，通过后台加载数据，实现了对部分网页的更新。 和常规的 AJAX 代码不同，jQuery为我们将原生AJAX进行了封装，现在我们只需要一行简单的代码，就能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 二、jQuery 底层 AJAX 请求 底层ajax请求使用ajax
JQuery中的Ajax
零怀念的博客
09-17 537
前言：学过JavaScript原生操作Ajax的都知道，那些操作太繁琐了，而且大多数都是重复的代码，如每次发起Ajax请求都要创建XMLHttpRequest。JQuery封装了Ajax，使得我们操作起来更加简洁。 提交Ajax请求 JQuery.ajax(options)是JQuery Ajax支持的底层实现，该方法返回创建的XMLHttpRequest对象。大部分时候开发者无需理会它返回的...
jQuery中的Ajax
Boreas的博客
09-07 1310
jQuery中的Ajax jQuery提供了六个Ajax操作方法 load() $.get 和 $.post 方法 $.ajax 方法 $.getScript 方法和 $.JSON 方法 jQuery提供的事件 ajaxStart 和 ajaxStop ajaxComlete、ajaxSend、ajaxError、ajaxSuccess 事件 load()方法 load()方法是jQuery中最为简单的Ajax方法 基本语法结构 $element.load(url,[data],[callback]
jQuery中ajax请求后台返回json数据并渲染HTML的方法
10-18
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式，它的作用是使得页面无需重新加载即可向服务器请求数据，并将数据动态地加载到页面中。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
jQuery中ajax的使用与缓存问题的解决方法
12-07
1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]...谈Ajax的Get和Post的区别 Get方式:用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的
jquery 中ajax执行的优先级
10-24
3. jQuery中的AJAX方法：jQuery简化了AJAX操作的编程模型，提供了$.ajax、$.get、$.post等方法，可以方便地实现AJAX调用。 4. 回调函数在异步处理中的应用：在异步操作中，回调函数用于指定操作完成后要执行的代码...
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
10-22
以上内容详细介绍了jQuery中Ajax全局事件的引用方式和各个事件的执行顺序，希望对想要在Web开发中使用jQuery处理Ajax请求的开发者有所启发和帮助。通过合理利用这些事件，可以使网页的用户体验更加流畅和友好。
AJAX-02-笔记
qq_24410589的博客
06-14 156
JQuery实现AJAX 1、JQuery的GET方式实现AJAX 2、JQuery的POST方式实现AJAX 3、JQuery的通用方式实现AJAX 4、小结 JQuery实现AJAX 1、JQuery的GET方式实现AJAX 核心语法：$.get(url,[data],[callback],[type]); url：请求的资源路径。 data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。 callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。 ty
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 3920
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery 中的 Ajax 详解
最新发布
zz130428的博客
10-12 2027
众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。
jQuery中ajax的使用
嗯很喜欢你
09-23 2182
java 下常见的json类库都有Gson，JSON_lib 和 jackson等，但 jackson相对来说比较高效，在项目中主要也是使用jackson进行json和Java对象转换； 那么什么是jackson呢  ？   1）：Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象    和xml文档，同样也可以将json、xml转换成Java...
jQuery基础——Ajax
m0_54066656的博客
09-03 2152
JQ中的ajax
jQuery与Ajax的应用（jQuery中的Ajax）
yanner_的博客
03-06 466
一.jQuery中的Ajax jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()和 $.post 方法，第三层是$.getScript()和 $getJSON() 方法。 1.load()方法 载入HTML文档 load()方法—能载入远程HTML代码并插入DOM中，结构为： load(url [,da...
掌握jQuery中Ajax校验技巧的实践指南
通过Ajax请求获取到新的数据后，可以在回调函数中使用jQuery的方法更新页面内容，如修改DOM元素的内容、样式等，而无需重新加载整个页面。这大大提高了页面的响应速度和用户体验。 知识点九：跨域请求问题 由于...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值