ajax(jQuery)学习笔记

资料链接：

@L_403_0@

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,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',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,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

原文链接：https://www.f2er.com/ajax/166000.html

ajax(jQuery)学习笔记

猜你在找的Ajax相关文章