JQuery中的Ajax和插件_jquery ajax插件-优快云博客

本文链接：https://blog.youkuaiyun.com/Paranoid99/article/details/77620886

本文详细介绍了JQuery中的AJAX用法及$.get()、$.post()等方法，并深入探讨了JQuery插件如validate、accordion、autocomplete和growl的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery Ajax

1 Ajax

$.ajax({
   url:url,
   data:data,//要提交的数据
   type:"GET",//提交方式
   timeout:3000,//设置请求事件
   success:success//请求成功时执行的函数
})

语法：

$.ajax(JSON);

JSON包含常用的参数

url：服务器的地址，获取数据或者推送数据的地方

data：需要给服务器的数据，根据业务需要去添加，比如登录的接口需要传递“用户名和密码”，获取书籍信息，不需要传递任何参数。

数据类型：JSON对象。键值对的“键”和服务器保持完全一致，包括键名的大小写。

type：数据提交的方式。GET/POST/PUT/DELETE

timeout：请求等待的时间。时间单位是毫秒，一般是10s

success：请求成功，返回处理

error：请求失败

dataType：预期的服务器响应的数据类型

2 $.get()

$.get(url,handle);

functionhandle(data,status){
console.log(data);//{"success":true,"error":""}:
console.log(status);//success
}

url：服务器的地址，需要将传递给服务器的参数，手动拼接到URL后面

handle(data,status)：请求之后的处理函数，只处理除网络错误之外的，函数包含两个2个参数

data：服务器返回的数据，业务数据

status：请求的状态

3 $.post()

JQuery插件

1 validate

（1）required：必填字段

<inputtype="text"id="txt1"required/>

（2）email：验证邮箱格式，支持很多形式的邮箱

<inputtype="email"id="email"required/>

（3）url：验证网址，形如http://www.baidu.com

<inputtype="url"id="url"required/>

（4）maxlength：输入字符的最大长度

<inputtype="text"id="maxlength"maxlength="5"/>

（5）rangelength[]：表示输入字符长度的范围

<inputtype="text"id="rangelength"rangelength="[5,10]"/>

验证的第二种写法，可以在表单验证的时候为其添加限制

$("#formdata").validate({
   rules:{
       password:{
           required:true,
           maxlength:"6"
       },
       repassword:{
           equalTo:"[name=password]"
       }
   }
});

2 accordion

依据标题和内容来自动选择折叠

$("#div1").accordion()

header：定义以哪个标签来折叠

event：定义折叠的事件。例如：mouseover，鼠标移上去就可以进行展开

animate：定义是否有动画。默认true有动画效果

disable：禁用折叠

distory：销毁折叠

3 autocomplete

   <title>预选</title>
   <scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script>
   <linkrel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <scriptsrc="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<labelfor="txt1">输入内容：</label>
<inputtype="text"id="txt1"/>
</body>
<script>
   $(function(){
       varcontent= [
             "华",
             "华点",
             "欢迎来到华点"
       ];
       $("#txt1").autocomplete({
           source:content
       })
   })
</script>