Jquery 아약스 기본 tutorial_jquery-JS 튜토리얼-php.cn

jQuery의 Ajax는 새로 고침이 필요 없는 웹 페이지 혁명을 가져왔습니다. 다음은 jQuery와 관련된 Ajax 작업에 대한 자세한 소개입니다. (특별한 지침은 필요하지 않으며 서버 구성이 필요합니다. 여기서는 Tomcat 7을 사용하고 있습니다)

1. 요청에 따라 파일 데이터를 로드합니다

여기서 요청은 일반적으로 클릭 등 웹페이지의 특정 작업입니다.

로드되는 데이터 유형은 다음과 같이 분류됩니다. a. HTML 파일 로드 c.

해당 4가지 로드 방법은 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 메소드의 첫 번째 매개변수는 로드된 파일 경로를 나타내며, 두 번째 매개변수는 로딩 완료 후 콜백 함수입니다. 이 콜백 함수를 통해 로드된 데이터에 대해 작업을 수행할 수 있습니다. 반복되는 부분은 각 루프를 사용하여 처리됩니다. 마지막으로, html 메소드를 사용하여 대상 id=dictionary를 사용하여 조립된 html 문자열을 요소에 추가합니다.

c. 자바스크립트 파일 로드

Javascript 파일 로드는 HTML 파일 로드와 유사합니다. 여기서 주목해야 할 점은 getScript 메소드를 사용하여 로드한 Javascript가 현재 Javascript 환경에 따라 직접 실행된다는 점입니다. 예:

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

로그인 후 복사

d.XML 파일 로드

get 메소드를 사용하여 jQuery에서 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 메소드, 텍스트 메소드 등을 사용하는 등.

2. Get 메소드를 기반으로 서버에서 데이터를 가져옵니다

이전 예에서는 모두 서버에서 정적으로 가져온 데이터 파일입니다. Ajax의 가치는 이에 국한되지 않고 get 메소드를 통해 서버로부터 동적으로 데이터를 얻는데, 이는 새로고침 없이 웹페이지를 구현하는 데 큰 도움을 줍니다.

다음으로 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 구성으로 인해 반환 시 필요한 데이터 외에 또 다른 패키징 레이어가 있다는 것입니다. 이는 Ajax 액세스 여부의 결과 콘텐츠와 성공 필드를 나타내는 데 사용되는 resultMSG입니다. 성공했습니다. 따라서 두 개의 평가 언패킹이 사용되었습니다.

여기서 내 백그라운드 Java 프로그램이 전달하는 것은 구성된 HTML이 아니라 json 유형의 데이터뿐입니다. Java 수준에서 HTML을 작성하고 전송하는 것은 데이터를 직접 전달하는 것만큼 편리하지 않고, 수정하는 것도 그리 편리하지 않은 것 같습니다. 앞으로는 스타일이나 페이지 구조를 직접 수정하는 것이 편리합니다.

get 메소드를 통해 서버 데이터를 얻는 것은 다음 요청을 서버에 제출하는 것과 같습니다: EGet.action?term=XXX

자바 배경 파일 코드는 아래와 같습니다.

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&#63;\""+ 
          "],"+ 
          "\"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; 
  } 
}

로그인 후 복사

이 작업의 데이터는 직접 구성한 것이며 여기서는 데모용으로만 사용됩니다. 실제 데이터는 일반적으로 프로젝트의 데이터베이스에 저장됩니다. 이것은 주로 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; 
  } 
}

로그인 후 복사

본 수업은 순수 포조 수업입니다. 특별한 방법은 없습니다.

3.struts.xml

구성을 전송하는 struts2의 json 방식입니다

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<!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, 성공 및 resultMSG를 볼 수 있습니다. 이것은 실제로 잘 작동합니다. 서버로부터 요구되는 값을 얻지 못하는 경우, ajax 접속이 성공하더라도 요구되는 값을 얻지 못하므로 얻은 결과는 성공한 것으로 간주되지 않는다. 프런트엔드 jQuery 작업을 용이하게 하기 위해 여기에 성공 표시가 추가되었습니다.

다른 방법으로 서버 데이터를 얻는 방법은 게시 방법, 로드 방법 등 쓰기 측면에서 기본적으로 가져오기와 동일합니다. 여기서는 자세히 다루지 않겠습니다.

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基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注脚本之家网站，有你们的关注我们会做的更好，谢谢！