您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

jquery对ajax的支持性

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 本文为大家介绍下jquery对ajax的支持性,感兴趣的朋友可以了解下

1.三个方法    1.1.load方法    //作用:将服务器返回的数据直接添加到符合要求的dom对象上  //相当于 obj.innerHTML = 服务器返回的数据    用法:  $obj.load(url,[请求参数]);    url : 请求地址  请求参数 :  第一种形式:请求字符串,比如: 'username=zs&age=22'  第二种形式:对象,比如 {'username':'zs','age':22}    //注意:  //a, load方法如果没有参数,会使用get方式发请求。如果有参数,会使用post方式发请求。  //b, 如果有中文参数值,load方法已经帮我们做了编码处理。    例子:    代码如下: $(function(){  $('a.s1').toggle(function(){  var airline = $(this).parent().siblings().eq(0).text();  $(this).next().load('priceInfo.do','airline=' + airline);  $(this).html('显示经济舱价格');  },function(){  $(this).next().empty();  $(this).html('显示所有票价');  });  });      1.2.$.get()和$.post()方法    //作用:向服务器发送get或者post请求 (get请求ie有缓存问题)    用法:  $.get(url,[data],[callback],[type]);  $.post(url,[data],[callback],[type]);    url : 请求地址  data : 请求参数,形式同上。  callback : 回调函数,可以通过该函数来处理服务器返回的数据。  callback格式:    function(data,statusText),    其中,data可以获得服务器返回的数据,  statusText是一个简单的字符串,描述服务器处理的状态。    type : 服务器返回的数据类型,类型可以是:  html : 返回的是html内容。  text : 返回的是text。  json : 返回的是json字符串  xml : 返回的是dom兼容的xml对象  script: 返回的javascriptz    例子:  复制代码 代码如下: function quoto(){  $.post('quoto.do',function(data){  //如果服务器返回的数据是json字符串,  //会自动转换成js对象或者json对象组成的数组。  $('#tb1').empty();  for(i=0;i<data.length;i++){  $('#tb1').append(  '<tr><td>' + data[i].code  + '</td><td>' + data[i].name  + '</td><td>' + data[i].price  + '</td></tr>');  }  },'json');t  }    1.3.$.ajax(options):    //options是一个形如{key1:value1,key2:value2...}的js对象,用于指定发送请求的选项。    选项参数如下:    url(string) : //请求地址  type(string) : //GET/POST  data(object/string) : //发送到服务器的数据  dataType(string) : //预期服务器返回的数据类型  success(function) : //请求成功后调用的回调函数,有两个参数:  function(data,textStatus),  其中,data是服务器返回的数据,  textStatus 描述状态的字符串。  error(function) : //请求失败时调用的函数,有三个参数  function(xhr,textStatus,errorThrown),  其中xhr是底层的ajax对象(XMLHttpRequest),  textStatus,errorThrown这两个参数其中的  一个可以获得底层的异常描述。  async:true(缺省)/false : //当值为false时,发送同步请求。    例子:  复制代码 代码如下: $(function(){  $('#s1').change(function(){    $.ajax({  'url':'carInfo.do',  'type':'post',  'data':'carName='+$('#s1').val(),  'dataType':'xml',  'success':function(data){  //data是服务器返回的数据  //如果返回的是xml文档,我们需要使用  //$函数将其包装$(data)成一个jQuery  //对象,方便查找。  //追加之前先清空  $('#tb1').empty();  $('#tb1').append(  '<tr><td>制造商:'  + $(data).find('company').text()  +' 价格:' + $(data).find('price').text()  +' </td><td>车身大小:'  + $(data).find('size').text()  + ' 门数:' + $(data).find('door').text()  + '</td><td>排量: '  + $(data).find('vol').text()  + ' 加速性能:'  + $(data).find('speed').text()  + '</td></tr>');  //要将表格显示出来  $('#tips').slideDown('slow');  setTimeout(function(){  $('#tips').fadeOut('slow');  },2000);  },  'error':function(){  $('#tb1').append(  "<tr><td colspan='3'>该车型信息暂时不可用</td></tr>");  $('#tips').slideDown('slow');  }  });  });  });    例子2:  解决中文乱码问题:  复制代码 代码如下: $.ajax({  'url':'netctoss7/ajaxCode',  'type':'post',  'data':{name:value},  'dataType':'json',  'async':false,  'success':function(data){  if(data){  $('#msg_verCode').text('');  v1=true;  }else{  $('#msg_verCode').text('验证码错误');  }  }  });      2.两个辅助性的方法    2.1.serialize():    //将jquery对象包含的表单或者表单控件转换成查询字符串。    2.2.serializeArray():    //转换为一个数组,每个数组元素形如{name:fieldName,value:fieldVal}的对象。  //序列化元素的作用,主要是用于ajax请求中,给data赋值。    说明:  只能用于表单或者表单控件  直接把表单的name和对应的value值发送出去,形如:name=value    例子:  复制代码 代码如下: $.ajax({})中  //'data':'carName='+$('#s1').val(),  'data':$('#s1').serialize(),    //'data':{'carName':$('#s1').val()},  'data':$('#s1').serializeArray(),