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(),