JQuery中的Ajax

最新推荐文章于 2024-03-13 07:00:00 发布
最新推荐文章于 2024-03-13 07:00:00 发布
阅读量328 收藏 1
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36783248/article/details/79111401
版权

坚持每天写博文，记录开发中的点点滴滴
本篇使用html作为客户端，jsp作为服务器端演示jQuery中的ajax的实现
- Ajax
*$.ajax()：最复杂、最灵活，最接近原生Ajax的用法
示例HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>get()方法</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/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">
    $(function(){
        $("#b1").click(function(){
            /*
             * $.ajax(options)
             *  * options:(可选)
             *      * url:请求路径
             *      * type:请求类型
             *      * async:表示是否异步
             *      * data:发送到服务器端的请求数据,格式是key/value格式
             *      * success:表示Ajax异步交互请求成功后,回调函数(接收服务器端的响应)
             *          * function(data, textStatus){}
             *              * data:请求返回的数据内容
             *              * textStatus:表示请求的状态,值有success、error、notmodify、timeout等
             *      * error:表示Ajax异步交互请求失败后,回调函数
                        * function(XMLHttpRequest, textStatus, errorThrown){}
                            * XMLHttpRequest对象
                            * textStatus:表示请求的状态,值有success、error、notmodify、timeout等
                            * errorThrown:异常对象
             *  * 返回值:XMLHttpRequest对象
             */
            var json = {
                username : $("#username").val(),
                psw : $("#psw").val()
            }

            $.ajax({
                url : "get.jsp",
                type : "get",
                async : true,
                data : json,
                success : function(data, textStatus){
                    alert(data);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown){
                    alert("请求错误啦。。。");
                }
            });

        });
    });
</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("password = "+request.getParameter("psw"));

    out.println("helloworld");
%>

*load()：最简单、最不灵活 缺点：
（1）load()不能自定义请求类型,而是由是否向服务器端发送请求数据
（2） load()不能自定义数据交换格式,只能使用文本(HTML)格式
示例：HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>load()方法</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../../../js/jquery.min.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">
        $(function(){
            $("#b1").click(function(){
                /*
                 * $(expr).load(url,data,callback)
                 *  * url:请求路径,绝对路径或相对路径
                 *  * data:请求参数,格式必须是key/value格式
                 *  * callback:回调函数,function(data, textStatus, XMLHttpRequest){}
                 *      * data:代表请求返回内容
                 *      * textStatus:代表请求状态,值可能为: succuss, error, notmodify, timeout 4 种
                 *      * XMLHttpRequest对象
                 * 
                 * jQuery中封装Ajax操作
                 * 
                 * load()方法的请求类型:
                 *  * (默认情况下)在没有向服务器端发送请求数据的时候,load()方法的请求类型就是GET方式
                 *  * 在向服务器端发送了请求数据的时候，load()方法的请求类型就是POST方法
                 * load()方法的问题:
                 *  * load()不能自定义请求类型,而是由是否向服务器端发送请求数据
                 *  * load()不能自定义数据交换格式,只能使用文本(HTML)格式
                 */
                var json = {
                    username : $("#username").val(),
                    psw : $("#psw").val()
                }

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

            });
        });
    </script>
</html>

JSP：

<%@ page language="java" pageEncoding="UTF-8"%>
<%
    System.out.println("connection server success!");

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

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

    out.println("helloworld!");

%>

*$.get()：请求类型是GET
*$.post()：请求类型是POST
GET&POST示例 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>get()方法</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../../js/jquery.min.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">
   $(function(){
        $("#b1").click(function(){
//          /*
//           * $.get(url,data,callback,type)
//           *  * url:请求路径
//           *  * data:请求参数,格式是key/value
//           *  * callback:回调函数,function(data, textStatus){}
//           *      * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
//           *      * textStatus:请求的状态,其值是success、error、notmodify、timeout等
//           *      * 返回值:XMLHttpRequest对象
//           *  * type:返回内容格式，xml, html, script, json, text, _default。
//           * 
//           * $.get()方法的请求类型一定是GET方式
//           */
//          var json = {
//              username : $("#username").val(),
//              psw : $("#psw").val()
//          }
//          
//          $.get("get.jsp",json,function(data, textStatus){
//              //直接接收服务器端的响应数据格式为JSON格式
//              console.info(data);
//              
//              //var json = eval("("+data+")");
//              //console.info(json);
//          });

            /*
             * $.post(url,data,callback,type)
             *  * url:请求路径
             *  * data:请求参数,格式是key/value
             *  * callback:回调函数,function(data, textStatus){}
             *      * data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
             *      * textStatus:请求的状态,其值是success、error、notmodify、timeout等
             *      * 返回值:XMLHttpRequest对象
             *  * type:返回内容格式，xml, html, script, json, text, _default。
             * 
             * $.post()方法的请求类型一定是POST方式
             */
//          var json = {
//              username : $("#username").val(),
//              psw : $("#psw").val()
//          }

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

            $.post("get.jsp",json,function(data, textStatus){
                //直接接收服务器端的响应数据格式为JSON格式
                console.info(data);

                //var json = eval("("+data+")");
                //console.info(json);
            });
        });
   });
</script>
</html>

JSP：

<%@ page language="java" pageEncoding="UTF-8"%>
<%
    System.out.println("conenction server success!");

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

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

    //响应文本格式
    //out.println("helloworld!");

    //响应XML格式
    //response.setContentType("text/xml");
    //out.println("<china><province name='jilinsheng'></province></china>");

    //响应JSON格式:jQuery提供的get()或post()方法时,数据格式为JSON格式时,只能使用第三方工具构建JSON格式的数据内容,不能使用手工方式
    out.println("[{'province':'jilinsheng'},{'province':'liaoningsheng'},{'province':'shandongsheng'}]");

%>

GET和POST方式只是请求方法不一样，上面代码也包含了序列化元素内容，当使用GET和POST类型为JSON时，服务器端需要使用第三方工具构建JSON格式数据
*$.getScript()：获取脚本代码
*$.getJSON()：返回的数据格式是JSON格式

  • 序列化元素
    *serialize()
    （1）序列化的是JSON格式中的key/value格式
    （2）返回的是JSON字符串
    *serializeArray()
    （1）序列化的是JSON格式中的数组格式
    （2）返回的是JSON对象
张晓鉴Oliver
关注
jquery中ajax中的参数,jquery中的ajax参数
weixin_42109598的博客
08-05 2695
jquery中将ajax封装成了函数，我们使用起来非常方便，jquery会自动根据内容选择post还是get方式提交数据，并且会自动编码，但是要想完全掌握jquery中的ajax，我们必须将它的各个参数记住：1、url strng 发送请求的地址2、type string 请求方式(post或get，默认get)，其他http请求方法，比如：put和delete也可以使用，但只有部...
JQuery发送AJAX请求
gcsyzy的博客
04-01 1584
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jQuery和AJAX
weixin_30564901的博客
08-03 94
一、定义 1.jQuery是一个JavaScript类库，安装时不需要添加额外的环境变量和配置文件。 2.配置：在相应的页面导入 <script type="text/javascript" src="jquery-1.7.2.js"></script> 二、设计思想 1.将HTML DOM对象进行封装，成为jQuery对象，并提供丰富的API来操作这些对...
jQuery实现AJAX
weixin_66187554的博客
02-20 311
JAVA
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 2957
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery中的Ajax
weixin_45375510的博客
10-11 4568
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请求方式,jQuery中ajax的4种常用的请求方式
weixin_36394468的博客
08-05 1645
jQuery中ajax的4种常用请求方式：1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。实例：保存数据到服务器，成功时显示信息。$.ajax({t...
jQuery中ajax的使用（最详细）
热门推荐
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
JQuery中Ajax的简单操作
weixin_51094637的博客
04-29 6812
Ajax 概念 全称：ASynchronous JavaScript And XML （代表 异步 JavaScript 和 XML) AJAX 并不是编程语言，是一种用于创建快速动态网页的技术。 AJAX 组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据） Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异.
jq ajax同步异步,详解JQuery中Ajax的同步与异步
weixin_39729840的博客
08-05 3473
说到ajax同步与异步，可能很多同学对它都不是很了解，接下来我们就Ajax的同步与异步作个简单的介绍。同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕。下面我们来做一个简单的比喻 ——1、一心一意：当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事...
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
11-27
jquery中ajax请求后台数据成功后既不执行success也不执行error，此外系统报错：Uncaught SyntaxError: Unexpected identifier at Object.success，但后台能够返回数据，原代码如下： var source=[]; $.ajax({ ...
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请求的开发者有所启发和帮助。通过合理利用这些事件，可以使网页的用户体验更加流畅和友好。
知识图谱-基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目-附项目源码+流程教程-优质项目实战
10-20
知识图谱_基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目_附项目源码+流程教程_优质项目实战
资产管理系统-使用Python+CSS开发的资产配置管理系统-附完整流程教程-优质项目.zip
10-20
资产管理系统_使用Python+CSS开发的资产配置管理系统_附完整流程教程_优质项目
基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）
10-20
基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库（毕业设计），本项目是一套个人98分毕业设计系统，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业，包含：项目源码、项目说明等。该项目可以直接作为毕设使用，项目都经过严格调试，确保可以运行！ 基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计） 基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据
614075276467436开心叠一叠.apk
最新发布
10-20
614075276467436开心叠一叠.apk
掌握jQuery中Ajax校验技巧的实践指南
通过Ajax请求获取到新的数据后，可以在回调函数中使用jQuery的方法更新页面内容，如修改DOM元素的内容、样式等，而无需重新加载整个页面。这大大提高了页面的响应速度和用户体验。 知识点九：跨域请求问题 由于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值