Jquery ajax基础教程
html += "";
html += "";
html += "";
$('#dictionary').html(html);
}
else
{
var $warning = $('
$('#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"?>
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
这里可以看到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 += "