Jquery ajax基础教程

jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7)

1.基于请求加载文件数据

这里的请求通常都是网页的某些操作,如点击等。

而其加载数据的类型归类为以下四种:a.加载HTML文件;b.加载JSON文件;c.加载Javascript文件;d.加载XML文件。

其对应的四种加载方法分别是:load、getJSON、getScript、get。

a.加载HTML文件

把编写好的HTML文件加载到网页中。例如:

//load方法加载html文件 
$('#letter-a a').click(function(){ 
    $('#dictionary').load('a.html'); 
    return false; 
});

这里a.html也是放在服务器端的一个已经编写好的页面文件,直接调用load,就可以让所匹配的目标内载入HTML内容。

b.加载JSON文件

把编写好的JSON文件加载到网页中。例如:

//加载json文件 
$('#letter-b a').click(function(){ 
  $.getJSON('b.json',function(data){ 
    var html = ''; 
    $.each(data,function(entryIndex, entry){ 
      html += "<div class='entry'>"; 
      html += "<h3 class='term'>" + entry.term + "</h3>"; 
      html += "<div class='part'>" + entry.part + "</div>"; 
      html += "<div class='definition'>"; 
      html += entry.definition; 
      if(entry.quote){ 
        html += '<div class="quote">'; 
        $.each(entry.quote, function(lineIndex, line){ 
          html += '<div class="quote-line">' + line + '</div>'; 
        }); 
        if(entry.author){ 
          html += '<div class="quote-author">' + entry.author + '</div>'; 
        } 
      } 
      html += "</div>"; 
      html += "</div>"; 
    }); 
    $('#dictionary').html(html); 
  }); 
  return false;  
}); 

getJSON方法第一个参数是指加载的文件路径,第二个参数是一个加载完成以后的回调函数。通过这个回调函数,就可以对加载好的data进行操作。重复的部分使用each循环处理。最后将拼凑好的html字符串使用html方法加入到目标id=dictionary的元素中。

c.加载Javascript文件

加载Javascript文件和加载HTML文件类似。这里需要注意的是,使用getScript方法加载进来的Javascript会根据当下Javascript环境直接运行。例如:

//执行脚本 
$('#letter-c a').click(function(){ 
    $.getScript('c.js'); 
    return false; 
}); 

d.加载XML文件

jQuery中可以使用get方法加载XML文件。例如:

//加载XML文档 
$('#letter-d a').click(function(){ 
    $.get('d.xml',function(data){ 
      $('#dictionary').empty(); 
      $(data).find('entry').each(function(){ 
        var $entry = $(this); 
        var html = '<div class="entry">'; 
        html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; 
        html += '<div class="part">' + $entry.attr('part') + '</div>'; 
        html += '<div class="definition">'; 
        html += $entry.find('definition').text(); 
        var $quote = $entry.find('quote'); 
        if($quote.length) 
        { 
          html += '<div class="quote">'; 
          $quote.find('line').each(function(){ 
            html += '<div class="quote-line">'; 
            html += $(this).text() + '</div>'; 
          }); 
          if($quote.attr('author')){ 
            html += '<div class="quote-author">'; 
            html += $quote.attr('author') + '</div>'; 
          } 
          html += '</div>'; 
        } 
        html += '</div>'; 
        html += '</div>'; 
        $('#dictionary').append($(html)); 
      }); 
    }); 
    return false; 
}); 

XML文件有一个特点就是,你可以像用jQuery操作HTML那样操作XML的那些元素。如使用attr方法、text方法等等。

2.基于Get方法向服务器获取数据

之前的例子都是从服务器上静态的获取数据文件。而Ajax的价值不只于此,通过get方法从服务器动态的获取数据,为web页面无刷新的实现提供了莫大的帮助。

下面就使用get方法从服务器获取一段所需要的数据。这里,本人结合J2EE的Struts2框架和TOMCAT搭建的服务器端。具体服务器端多种多样,可以是php+apache或者其他什么的都可以。

操作如下,用户点击Eavesdrop则发送get方法到服务器,取得Eavesdrop的数据,并且返回json值,然后在jQuery中装配。

代码如下:

//GET方法加载服务器内容 
$('#letter-e a').click(function(){ 
    var requestData = {term:$(this).text().toUpperCase()}; 
    $.get('EGet.action', requestData, function(data){       
      //返回的数据包结构根据Struts2配置如下: 
      //{"resultMSG":"{ 内部另一个json结构 }","success":"true"} 
      //先将返回的数据包拆包 
      var responseObj = eval("("+data+")"); 
      if(responseObj.success == 'true') 
      { 
        $('#dictionary').empty(); 
        //返回成功,接下来再次解包resultMSG 
        var dataObj = eval("("+responseObj.resultMSG+")"); 
        var html = ""; 
        html += "<div class='entry'>"; 
        html += "<h3 class='term'>" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else 
      { 
        var $warning = $('<div>Sorry, your term was not found!</div>'); 
        $('#dictionary').html($warning); 
      } 
    }); 
    return false; 
}); 

这里要说明的是由于struts2配置,返回的时候在需要的数据外又打了一层包,用于表示结果内容的resultMSG和是否ajax访问成功的success字段。所以使用了2次eval解包。

这里我后台java程序传递过来的并非配置好的HTML,而是仅仅是json类型的数据,本人认为在java层面编写html并传递不如直接传递数据方便,以后修改样式或者页面结构也都不如直接修改javascript方便。

通过get方法获得服务器数据,相当于向服务器提交如下这种请求:EGet.action?term=XXX

下面放出java后台文件代码:

1.EGet.java

package lhb; 
import com.opensymphony.xwork2.ActionSupport; 
public class EGet extends ActionSupport 
{ 
  private String term; 
  private Terms sampleTerm; 
  private String success; 
  private String resultMSG; 
  /** 
   * 
   */ 
  private static final long serialVersionUID = 1L; 
  public String execute() throws Exception 
  { 
    initData(); 
    if(term.equals(sampleTerm.getTerm())) 
    { 
      success = "true"; 
      resultMSG = "{\"term\": \""+sampleTerm.getTerm()+"\","+ 
          "\"part\": \""+sampleTerm.getPart()+"\","+ 
          "\"definition\": \""+sampleTerm.getDefinition()+"\","+ 
          "\"quote\": ["+ 
          "\"Is public worship, then, a sin,\","+ 
          "\"That for devotions paid to Bacchus\","+ 
          "\"The lictors dare to run us in,\","+ 
          "\"And resolutely thump and whack us?\""+ 
          "],"+ 
          "\"author\": \""+sampleTerm.getAuthor()+"\"}"; 
    } 
    else{ 
      success = "false"; 
      resultMSG = "fail"; 
    } 
    return SUCCESS; 
  } 
  //初始化数据 
  private void initData() 
  { 
    String partEAVESDROP = "v.i."; 
    String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself."; 
    String quoteEAVESDROP[] = {"A lady with one of her ears applied", 
        "To an open keyhole heard, inside,", 
        "Two female gossips in converse free —", 
        "The subject engaging them was she.", 
        "\"I think,\" said one, \"and my husband thinks", 
        "That she's a prying, inquisitive minx!\"", 
        "As soon as no more of it she could hear", 
        "The lady, indignant, removed her ear.", 
        "\"I will not stay,\" she said, with a pout,", 
        "\"To hear my character lied about!\""}; 
    String authorEAVESDROP = "Gopete Sherany"; 
    Terms EAVESDROP = new Terms(); 
    EAVESDROP.setTerm("EAVESDROP"); 
    EAVESDROP.setPart(partEAVESDROP); 
    EAVESDROP.setDefinition(definitionEAVESDROP); 
    EAVESDROP.setQuote(quoteEAVESDROP); 
    EAVESDROP.setAuthor(authorEAVESDROP); 
    sampleTerm = EAVESDROP; 
  } 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getSuccess() 
  { 
    return success; 
  } 
  public void setSuccess(String success) 
  { 
    this.success = success; 
  } 
  public String getResultMSG() 
  { 
    return resultMSG; 
  } 
  public void setResultMSG(String resultMSG) 
  { 
    this.resultMSG = resultMSG; 
  } 
} 

这个action中的数据本人直接配置了,这里只是做一个示范使用。真正的这些数据在项目中一般是存放在数据库中的。由于这主要是jQuery方面的小示例,就不弄那么麻烦了。

2.Terms.java

package lhb; 
public class Terms 
{ 
  private String term; 
  private String part; 
  private String definition; 
  private String quote[]; 
  private String author; 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getPart() 
  { 
    return part; 
  } 
  public void setPart(String part) 
  { 
    this.part = part; 
  } 
  public String getDefinition() 
  { 
    return definition; 
  } 
  public void setDefinition(String definition) 
  { 
    this.definition = definition; 
  } 
  public String[] getQuote() 
  { 
    return quote; 
  } 
  public void setQuote(String[] quote) 
  { 
    this.quote = quote; 
  } 
  public String getAuthor() 
  { 
    return author; 
  } 
  public void setAuthor(String author) 
  { 
    this.author = author; 
  } 
} 

这个类纯粹就是一个pojo类。没有什么特别的方法。

3.struts.xml

这个是struts2的json方式传递配置

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE struts PUBLIC 
  "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
  "http://struts.apache.org/dtds/struts-2.3.dtd"> 
<struts> 
  <!-- 指定全局国际化资源文件 --> 
  <constant name="struts.custom.i18n.resources" value="i18n"/> 
  <!-- 指定国际化编码所使用的字符集 --> 
  <constant name="struts.i18n.encoding" value="GBK"/> 
  <!-- JSON的action --> 
  <package name="jsonInfo" extends="json-default"> 
    <action name="EGet" class="lhb.EGet"> 
      <result type="json"> 
        <param name="contentType">text/html</param> 
        <param name="includeProperties">success, resultMSG</param> 
      </result> 
    </action> 
  </package> 
</struts> 

这里可以看到includeProperties里所配置的外面一层json,success和resultMSG。这在实际中很好用。如果服务器中没有取得需要的值,虽然ajax访问成功,但是获得的结果并不算成功,因为没有取得需要的值。这里加入了success标示,方便前台jQuery操作。

基于其他方法获取服务器数据从写法上与get基本一致,如post方法、load方法。这里就不再赘述了。

3.动态提交表单

通过jQuery的AJAX支持,可以让我们很方便的动态提交表单而不用刷新页面。

如下面例子:

$('#letter-f form').submit(function(){ 
    //调用preventDefault方法阻止事件冒泡,具体工作就是如果网页有脚本错误,那么则会阻止提交form表单 
    event.preventDefault(); 
    var formValues = $('input[id="term"]').val(); 
    var requestStr = {'term':formValues.toUpperCase()}; 
    $.get('EGet.action', requestStr, function(data){ 
      var responseObj = $.parseJSON(data); 
      if(responseObj.success == 'true') 
      { 
        var html = ''; 
        var dataObj = $.parseJSON(responseObj.resultMSG); 
        html += "<div class='entry'>"; 
        html += "<h3 class='term'>" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else{ 
        var warning = $('Sorry, your term was not found!'); 
        $('#dictionary').html(warning); 
      } 
    }); 
}); 

这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是:

首先调用这个 preventDefault();这个方法在注释里也说明了,用于阻止事件冒泡带来的不便与麻烦。

接下来通过$()获得input的元素,使用val方法获得其值,接下来的使用方法与上例基本相同。

这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的,所有,不是太方便用,就没用。

4.关于Ajax的观察员函数

jQuery包含了2个全局的ajax观察员函数:ajaxStart和ajaxStop。

分别在执行ajax操作的起始和结束时调用。例如:

//ajax的观察员函数 ajaxStart 和 ajaxStop 
  $('<div id="loading">Loading...</div>').insertBefore('#dictionary') 
    .ajaxStart(function(){ 
      $(this).show(); 
    }).ajaxStop(function(){ 
      $(this).hide(); 
    }); 

这里无论哪个a标签触发ajax操作,包括静态载入文件和动态服务器访问,都会触发ajaxStart和ajaxStop。
关于错误处理,常用的三个函数:success、complete、error。

下面以error为例:

.error(function(jqXHR){ 
  $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); 
}); 

可以以连缀的写法将error方法放置于get方法之后:“$.get().error()”这样。
刚才看了一下,这个可以将Tomcat的报错,加载到页面之上。这在有的时候还是很有用的。如图:

不过不知道为何这个将我原有样式也覆盖了一些,如果有哪位网友知道,麻烦指正一下问题所在。谢谢了。

5.Ajax和事件

Ajax动态访问服务器以后生成的元素,如果想绑定事件的话,一种方法是每次取到都重新绑定处理程序,这种相对来说比较简单,但是不适合DOM结构经常变化的场景。如果DOM结构经常变化,那么就需要用live方法,实现事件委托。

live用法与bind一样。

关于jquery ajax基础教程今天小编就给大家介绍到这里,后续还会持续给大家介绍,希望大家继续关注脚本之家网站,有你们的关注我们会做的更好,谢谢!

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。 在没给大家介绍正文之前先给分享Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELE
Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息. JavaScript代码如下: function message(){ txt = "p浏览器代码名: " + navigator.appCodeName + "/p";txt+= "p浏览器名称: " + navigator.appName + "/p"; txt+= "p浏览器平台和版本: " + navigator.appVersion + "/p";txt+= "p是否开启cookie
小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果: 现附上自己写的源代码 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" script language="JavaScript" type="text/javascript" function star(n) { var array=new Array(); array[0]=document.getElementById("oneSt
8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢。 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。 var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要奇怪person[“5”],这里是合法的
最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意。可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了,而WebSocket无疑是最合适的。WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebSocket暂时来说是实时通讯的最佳协议了。 至
jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效,分享给大家,具体如下 效果图: 具体代码如下: html代码: section class="strips" article class="strips__strip" div class="strip__content" h1 class="strip__title" data-name="Lorem"Awesome/h1 /div /article article class="strips__
如何获取浏览器信息 Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息. JavaScript代码如下: 复制代码 代码如下: function message(){ txt = "p浏览器代码名: " + navigator.appCodeName + "/p"; txt+= "p浏览器名称: " + navigator.appName + "/p"; txt+= "p浏览器平台和版本: " + navigator.appVersion + "
虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采。 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=outputs。 我们知道在JS中回调是经常的事,而一般回调又以匿

12个常用的js正则表达式 - 2015-11-21 14:11:04

在这篇文章里,我已经编写了12个超有用的正则表达式,这可是WEB开发人员的最爱哦。 1.在input框中只能输入金额,其实就是只能输入最多有两位小数的数字 //第一种在input输入框限制 input type="text" maxlength="8" class="form-control" id="amount" value="" onChange="count();" onkeyup="if (this.value==this.value2) return; if (this.value.searc
先来看这行代码: script src = "allMyClientSideCode.js"/script 这有点儿……不怎么样。“这该放在哪儿?”开发人员会奇怪,“靠上点,放到head标签里?还是靠下点,放到body标签里?”这两种做法都会让富脚本站点的下场很凄惨。head标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于“白屏死机”状态。而body标签末尾的大脚本只会让用户看到毫无生命力的静态页面,原本应该进行客户端渲染的地方却散布着不起作用 的控件和空空如也的方框。 完美解决这