资料链接:
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/
servlet所需jar包-打包:
http://download.csdn.net/detail/zhengsihan/5879285
代码:
http://download.csdn.net/detail/zhengsihan/5879555
servlet:(最烦就是json用到的包,上面已经打包好了)
package org.minus.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@WebServlet(description = "for e-mail sending", urlPatterns = { "/mail.do" })
public class EmailServ extends HttpServlet {
private static final long serialVersionUID = 1L;
public EmailServ() {}
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入servlet_" + new Date());
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/plain");
String name = req.getParameter("name");
String age = req.getParameter("age");
System.out.println("接收到的name为:" + name + ",age为:" + age);
JSONObject jObj = new JSONObject();
JSONArray ary = new JSONArray();
JSONObject member = null;
// jObj.put("memo", "hello");//返回单个信息
// jObj.put("spy", "snowden");
for(int i = 0; i < 5; i++){
member = new JSONObject();
member.put("memo", "hello_" + i);
member.put("spy", "snow_" + i);
ary.add(member);
}
jObj.put("returns", ary);
PrintWriter pw = resp.getWriter();
pw.write(jObj.toString());
pw.flush();
}
}
js事件(用了jQuery):
$(document).ready(function(){
$('#emailBtn').click(function(){
$('div').load('component/email-form.html');
});
$('#ajaxBtn').click(function(){
alert('out');
$.ajax({
type:'POST',
url:'mail.do',
cache:false,
success:function(json){
}
});
});
$('#getBtn').click(function(){
$.get('mail.do',{
"name":"zsh",
"age":"18"
},function(data, status){
var returns = data.returns;
var memo;
var spy;
for(var i = 0; i < returns.length; i++){
memo = returns[i].memo;
spy = returns[i].spy;
alert('第'+(i+1)+'个消息:'+memo+'\t'+spy);
};
},'json');
});
$('#postBtn').click(function(){
$.post('mail.do',function(data){
alert('$.post成功返回');
});
});
});
drop-item.html(下拉菜单元素调换)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拉列表测试</title>
<style type="text/css">
select,ul{float:left;}
ul{padding:0;text-align:center;}
ul li{float:none;list-style:none;}
</style>
<script type="text/javascript" src="../js/jquery-2.0.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('option').click(function(){
});
$('#toRight').click(function(){
var $selectedItem = $('#boxLeft option:selected');
$selectedItem.appendTo('#boxRight');
});
$('#toLeft').click(function(){
var $selectedItem = $('#boxRight option:selected');
$selectedItem.appendTo('#boxLeft');
});
$('#all2right').click(function(){
var $selectedItem = $('#boxLeft option');
$selectedItem.appendTo('#boxRight');
});
$('#all2Left').click(function(){
var $selectedItem = $('#boxRight option');
$selectedItem.appendTo('#boxLeft');
});
});
</script>
</head>
<body>
<form>
<select id="boxLeft" multiple="multiple" style="width:100px;height:160px;">
<option value="1">alpha</option>
<option value="2">beta</option>
<option value="3">cruise</option>
</select>
<ul>
<li><input type="button" id="all2right" value="ALL ->" /></li>
<li><input type="button" id="toRight" value="->" /></li>
<li><input type="button" id="toLeft" value="<-" /></li>
<li><input type="button" id="all2Left" value="<- ALL" /></li>
</ul>
<select id="boxRight" multiple="multiple" style="width:100px;height:160px;"></select>
</form>
</body>
</html>
$.getScript
$('#ddd').click(function(){
var $newBtn = $("<input type='button' id='TEST' value='Click Me!' />");
//$('#btns').append($newBtn);
$(this).after($newBtn);
$.getScript('js/ddd.js', function(){alert('js已加载');});
});
$.each
$('#each').click(function(){
var $btns = $('input');
$btns.each(function(i, btn){//i是数组下标,btn是每个按钮。注意,btn并不是jQuery对象,所以下面做了转换
var $btn = $(btn);
alert($btn.val());
});
});
$.jsonp + $.ajax
jsonp相关资料:
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
$(document).ready(function(){
$('#ajaxBtn').click(function(){
//$.ajax({type:'POST',url:'mail.do',cache:false,success:function(json){}});
//$.getJSON('mail.do',function(data){});
$.ajax({
type:'post',
timeout:3000,
async:false,
url:'http://localhost:8080/ajaxtest/mail.do',
data:{'name':'zsh','age':'28'},
dataType:'JSONP',
jsonp:'callback',
jsonpCallback:'theHandler',
success:function(data){alert(data);},
error:function(){alert('error');}
});
});
});
servlet代码
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(new Date());
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/javascript");
String output = req.getParameter("callback")+"(\'这是JSONP的返回数据\');";
PrintWriter pw = resp.getWriter();
pw.write(output);
pw.flush();
}
$.serialize
$.serializeArray
$.param
.extend
.on