【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）

2401_84093443

于 2024-05-16 02:23:50 发布

阅读量714

点赞数 10

分类专栏：程序员文章标签： ajax jquery okhttp

本文链接：https://blog.csdn.net/2401_84093443/article/details/138932668

版权

程序员专栏收录该内容

270 篇文章 0 订阅

订阅专栏

{foo:[ ‘bar1"，“bar2”]}转换为’foo=bar1&foo=bar2’。

(4)dataType：设置服务器返回数据的数据类型。如果不指定，jQuery将自动根据HTTP包的MIME信息来智能判断，随后服务器端返回的数据会根据这个值解析后，传递给回调函数。该属性的可用值包括以下几种。

“xml”：返回XML文档，可用jQuery处理。
“html”：返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
“script”: 返回纯文本 JavaScript 代码。
“json”：返回JSON数据。
“jsonp”：返回JSONP格式的数据。
“text”：返回纯文本字符串。

(5) asyne：同步与异步标志，默认值是true(异步)。同步时会阻塞程序的运行，请求完成之后才能继续运行脚本代码，异步时请求的过程不会阻塞代码运行。

(6) success：请求成功后所调用的回调函数。该回调函数所带参数主要包括服务器返回数据和返回状态。

(7) error：请求失败后所调用的回调函数。该回调函数所带参数主要包括 XMLHttpRequest 对象错误信息、（可能）捕获的错误对象。

例中jQuery使用$. ajax()方法调用服务器端的文本文件，其在浏览器中的运行结果如图所示。

【例1】


<!DOCTYPE html>

<html>

  <head>

    <title>html</title>

    <script type="text/javascript "src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

	<script>

      $(function(){

        $.ajax({

          url:"server.txt",

          success:function(result){

            $("#resultDiv").html(result);

            }

		});

	});

    </script>

   </head>

 <body>

    <div id="resultDiv"></div>

 </body>

</html>

服务器端文本文件server. txt的源代码如下所示：


服务器端文件内容，返回到客户端。

例2使用$. ajax()方法实现上节例1中原生 JavaScript 的用户名验证的功能。读者应该重点理解$.ajax()方法的数据发送方式与服务器端返回数据的处理方法，并对$.ajax()方法的使用方法进行着重分析。服务器端程序仍使用上节例1的服务器端servlet程序AjaxServlet.java。

【例2】


<!DOCTYPE html>

<html>

   <head>

   <title>$.ajax()用户名验证</title>

    <meta http-equiv="content=type"  content="text/html;  charset=UTF-8">

    <script type="text/javascript " src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

	<script type="text/javascript ">

        $(function(){

         $("#username").blur(function(){

          $.ajax({

            url:"/hello/AjaxServlet",//调用服务器端程序

            dataType:"text",//设置返回数据是test类型

            data:{"name":$("#username").val()},//设置发送数据“name：值”

            type:"post",//数据提交方式post

            success:function(result){//数据返回成功，result返回数据

               if($.trim(result)=="true"){//$. trim()是删除空格方法

                  $("#display").html("用户名被占用");

                  $("#display").css({color:"white",  background :"red"});

                }

                else

                {

                $("#display").html("用户名可用");

                $("#display").css({color:"green",  background :"white"});

                }

             }

           });

          });

        });

    </script>

    </head>

 <body>

    <form action=""  method="get">

     用户名：

         <input type="text"  id="username"  name="username">

          <span id="display"></span><br>

          <input type="submit"  value="test">

    </form>

  </body>

</html>

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84093443

关注

10
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫