Ajax常用网络与处理函数详解编程语言

一、处理方法

1、each方法

用来处理对象和数组的遍历

语法:

jQuery.each(array, callback ) 
jQuery.each( object, callback )

实例:

// 遍历数组元素,i为索引,item为值 $.each(['Brown', 'Tom'], function(i, item) { //处理元素 }); 
 
 
// 遍历对象属性,callback中第一个值为属性名,第二个值为属性值 $.each({ 
    name: "张三", 
    age: 18 }, function(property, value) { //处理元素 });

2、inArray()函数

用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1

语法:
表示返回value在数组array的索引值,fromIndex表示从哪个下标开始搜索

jQuery.inArray( value, array ,[ fromIndex ] )

实例:

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4

3、trim函数

去空格

用法:

$.trim()

实例:

$.trim(" 01234 ")//得到01234

4、get方法

get方法是获取的dom对象,也就是通过document.getElementById获取的对象(根据索引获对象)

语法:

.get( [index ] )

假如,对这个代码操作:

<div id="link"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> </div>

想要获取id为link的div下的第1个a标签的值
做法:

$("#link a").get(0)

注意:get方法是获取dom对象,eq方法是获取jq对象

5、index()方法

从匹配的元素中搜索给定元素的索引值,从0开始计数(根据对象获索引)

语法:

.index()//无参数的返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 .index( selector )//选择器做参数 .index( element )//元素做参数

实例:

<ul> 
   <a></a> 
   <a></a> 
   <li id="test1">1</li> 
   <li id="test2">2</li> 
   <li id="test3">3</li> </ul> 
 $("li").index();//返回2 
$("li").index(document.getElementById("test2"));//1 
$("li").index($("#test2"))//1

二、Ajax网络加载

1、getJSON()方法

异步加载JSON格式数据

语法:
url:地址,
data:请求时发送的数据
callback:请求成功的回调

$.getJSON(url,[data],[callback])

实例:

$.getJSON('sport.json', function(data) { 
       //逻辑 })

2、getScript()方法

异步加载并执行js文件

语法:

$.getScript(url,[callback])

3、get()方法

以GET方式从服务器获取数据

语法:

$.get(url,[callback])

4. post()方法

以POST方式从服务器发送数据

语法:

$.post(url,[data],[callback])

5、serialize()方法

可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求

语法:

$(selector).serialize()

实例:

<form action=""> 姓名:<input name="Text1" type="text" size="12" /> <select name="Select1"> <option value="0">男</option> <option value="1">女</option> </select> <input name="Checkbox1" type="checkbox" />资料是否可见 </li> </form> 
 $("form").serialize(); 
 
//值为Text1=liu&Select1=0&Checkbox1=on

6、ajax()方法(最常用)

加载服务器数据

settings为发送ajax请求时的配置对象
settings的属性:
url:请求的路径
data:请求时传递的数据
dataType:服务器返回的数据类型
success:请求成功的执行的回调函数
error:请求失败的回调函数
type:为发送数据请求的方式,默认为get

语法:

$.ajax([settings])

实例:

$.ajax({                   
     url:"http://www.imooc.com/data/check.php", 
     data:{ num: $("#txtNumber").val() }, 
     dataType:"text", 
     success: function (data) { 
         //得到数据 
         alert(data); 
     } 
});

7、ajaxSetup()方法

以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值

语法:

$.ajaxSetup([options])

实例:

$.ajaxSetup({ 
    type: 'POST', 
    success:function (data) { 
 
    }, 
    error:function(data){ 
    } 
}); 
//在这里配置了全局的配置,每一个ajax请求就不需要配置这些settting了

8、ajaxStart()和ajaxStop()方法

ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数

语法:

$(selector).ajaxStart(function()) 
$(selector).ajaxStop(function())

实例:

$("#divload").ajaxStart(function(){ 
   $(this).html("正在请求数据..."); 
}); 
$("#divload").ajaxStop(function(){  
    $(this).html("数据请求完成!"); 
});

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/7788.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论