0


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

🎉个人主页:这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
      【速成之路】SQLserver

jQuery实现Ajax

在这里插入图片描述
  jQuery对 JavaScript 代码进行封装,以方便前台代码的编写,其最大优势是解决了浏览器的兼容问题,这也是使用jQuery非常重要的原因。

Ajax的核心是 XMLHttpRequest 对象,而jQuery对Ajax异步操作进行了封装。本节将讲解jQuery实现Ajax的几种常用方式,包括

$.ajax

$.post

,

$.get

$.ajax()方法

$.ajax()

方法通过HTTP请求加载远程数据,该方法是jQuery底层的Ajax实现。

$.ajax()

方法返回其创建的 XMLHttpRequest 对象,大多数情况下无须直接操作,除非需要操作不常用的选项,以获得更多的灵活性。

$.ajax()

方法的调用格式如下所示:

$.ajax({
url:'请求地址',
type:'POST/GET',
data:{//从客户端发送到服务器的值
数据1:值1,
数据2:值2,
},
dataType:'设置从服务器端返回数据的数据类型',
async:'true|false',
success:function(str){//Ajax请求成功回调函数的相关操作语句},
error:function(err){//Ajax请求失败回调函数}});

  $.ajax()方法的常用参数说明如下:

(1) url:用于请求数据的地址,默认值是当前网页地址。

(2) type:说明当前Ajax向服务器端发送数据采用get方法还是post方法。get方法会将前端上传的数据直接与地址连接起来,能传输的数据最大为1024B,一般用于查询操作(不会威胁数据库数据)。get方法有缓存问题,会被浏览器缓存起来。post方法比较安全,一般用于新增、删除、修改等操作,传输数据的大小2MB。

(3) data:发送到服务器的数据。该数据将会自动转换为请求字符串格式。GET请求中数据将附加在URL后。如果为数组,jQuery将自动为不同值对应同一个名称。例如,
{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】

<!DOCTYPEhtml><html><head><title>html</title><scripttype="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><divid="resultDiv"></div></body></html>

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

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

  例2使用

$. ajax()

方法实现上节例1中原生 JavaScript 的用户名验证的功能。读者应该重点理解

$.ajax()

方法的数据发送方式与服务器端返回数据的处理方法,并对

$.ajax()

方法的使用方法进行着重分析。服务器端程序仍使用上节例1的服务器端servlet程序AjaxServlet.java。
【例2】

<!DOCTYPEhtml><html><head><title>$.ajax()用户名验证</title><metahttp-equiv="content=type"content="text/html;  charset=UTF-8"><scripttype="text/javascript "src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><scripttype="text/javascript ">$(function(){$("#username").blur(function(){
          $.ajax({url:"/hello/AjaxServlet",//调用服务器端程序dataType:"text",//设置返回数据是test类型data:{"name":$("#username").val()},//设置发送数据“name:值”type:"post",//数据提交方式postsuccess: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><formaction=""method="get">
     用户名:
         <inputtype="text"id="username"name="username"><spanid="display"></span><br><inputtype="submit"value="test"></form></body></html>

在这里插入图片描述


本文转载自: https://blog.csdn.net/m0_61684063/article/details/124655536
版权归原作者 这个昵称我想了20分钟 所有, 如有侵权,请联系我们删除。

“【速成之路】网页编程必会的Ajax&mdash;&mdash;jQuery实现Ajax(一)”的评论:

还没有评论