" + entry.term + "
"; html += "" + entry.part + "
";
html += "";
html += entry.definition;
if(entry.quote){
html += '
";
});
$('#dictionary').html(html);
});
return false;
});getJSON ， 。 ， data 。 each 。 html html id=dictionary 。
';
$.each(entry.quote, function(lineIndex, line){
html += '
";
html += "' + line + '
';
});
if(entry.author){
html += '';
}
}
html += "c. Javascript
Javascript HTML 。 ， getScript Javascript Javascript 。 ：
//
$('#letter-c a').click(function(){
$.getScript('c.js');
return false;
});d. XML 파일 불 러 오기
jQuery 에 서 는 XML 파일 을 get 방법 으로 불 러 올 수 있 습 니 다.예 를 들 면:
// XML
$('#letter-d a').click(function(){
$.get('d.xml',function(data){
$('#dictionary').empty();
$(data).find('entry').each(function(){
var $entry = $(this);
var html = '';
html += '' + $entry.attr('term') + '
';
html += '' + $entry.attr('part') + '';
html += '';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if($quote.length)
{
html += '';
$quote.find('line').each(function(){
html += '';
html += $(this).text() + '';
});
if($quote.attr('author')){
html += '';
}
html += '';
}
html += '';
html += '';
$('#dictionary').append($(html));
});
});
return false;
});2. Get 방법 으로 서버 에 데이터 가 져 오기
이전의 예 는 서버 에서 정적 으로 데이터 파일 을 가 져 오 는 것 이 었 다.한편, Ajax 의 가 치 는 이것 뿐만 아니 라 get 방법 을 통 해 서버 에서 동적 으로 데 이 터 를 가 져 와 웹 페이지 가 새로 고침 되 지 않 는 실현 에 큰 도움 을 주 었 습 니 다.
다음은 get 방법 으로 서버 에서 필요 한 데 이 터 를 가 져 옵 니 다.여기 서 저 는 J2EE 의 Struts 2 프레임 워 크 와 TOMCAT 를 결합 하여 구축 한 서버 쪽 입 니 다.구체 적 인 서버 엔 드 는 pp + apache 또는 다른 모든 것 이 가능 합 니 다.
다음 작업 을 수행 합 니 다. 사용 자 는 Eavedrop 을 누 르 면 get 방법 을 서버 에 보 내 Eavedrop 의 데 이 터 를 얻 고 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 += "";
html += "" + dataObj.term + "
";
html += "" + dataObj.part + "";
html += "";
html += dataObj.definition;
if(dataObj.quote){
html += '';
$.each(dataObj.quote, function(lineIndex, line){
html += '' + line + '';
});
if(dataObj.author){
html += '';
}
}
html += "";
html += "";
$('#dictionary').html(html);
}
else
{
var $warning = $('Sorry, your term was not found!');
$('#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
이것 은 struts 2 의 json 방식 전달 설정 입 니 다.
text/html
success, resultMSG
include Properties 에 설 치 된 바깥쪽 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 += "";
html += "" + dataObj.term + "
";
html += "" + dataObj.part + "";
html += "";
html += dataObj.definition;
if(dataObj.quote){
html += '';
$.each(dataObj.quote, function(lineIndex, line){
html += '' + line + '';
});
if(dataObj.author){
html += '';
}
}
html += "";
html += "";
$('#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
$('Loading...').insertBefore('#dictionary')
.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
정적 불 러 오기 파일 과 동적 서버 접근 을 포함 하여 어떤 a 태그 가 ajax 작업 을 촉발 하 든 ajax Start 와 ajax Stop 을 촉발 합 니 다.
오류 처리 에 대해 자주 사용 하 는 세 가지 함수: success, complete, error.
다음은 error 를 예 로 들 면:.error(function(jqXHR){
$('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText);
});
에 러 방법 을 get 방법 뒤에 연결 해서 놓 을 수 있 습 니 다. "$. get (). error ()" 이렇게 합 니 다.
방금 봤 는데 이 건 Tomcat 의 오 류 를 페이지 에 불 러 올 수 있 습 니 다.이것 은 때때로 여전히 매우 유용 하 다.그림:
그런데 왜 이것 이 제 원래 의 양식 을 덮어 놓 았 는 지 모 르 겠 습 니 다. 만약 에 어떤 네티즌 이 알 고 있다 면 문제점 을 지적 해 주세요.고맙습니다.
5. Ajax 와 이벤트
Ajax 가 서버 에 동적 으로 접근 한 후에 생 성 된 요 소 는 이 벤트 를 연결 하려 면 가 져 올 때마다 처리 프로그램 을 다시 연결 하 는 방법 입 니 다. 이런 방법 은 상대 적 으로 간단 하지만 DOM 구조 가 자주 변화 하 는 장면 에 적합 하지 않 습 니 다.만약 DOM 구조 가 자주 변 한다 면 라 이브 방법 으로 사건 의뢰 를 실현 해 야 한다.
live 용법 은 bid 와 같다.
