jquery+ajax+书写规范,Jquery书写ajax(示例代码)

根据API学习本章

Jquery书写ajax

使用ajax发送表单到servlet，发送时显示等待图片，servlet处理完返回信息，在页面显示返回信息，并且隐藏等待图片

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

My JSP ‘ajax.jsp‘ starting page

$(function() {

$("#submit").click(

function() {

varparam = {

name : $("#name").val(),

age : $("#age").val()

};

$.ajax({

type : "GET",

url : "oneServlet",

cache : false,

data : param,

beforeSend : function() {// 在发送请求之前触发的事件

$("img").show();

},

complete : function() {// 在发送请求完成之后触发的事件

$("img").hide();

},

success : function(data) {// 在请求成功后触发的事件

alert(data);

},

error : function(XMLHttpRequest, textStatus, errorThrown) {// 在请求失败时候触发

alert(XMLHttpRequest.status + "   " + textStatus + "  "+ errorThrown);

}

});

});

});

user name:
age:

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

/*try {

Thread.sleep(5000);

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}*/

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

String name=request.getParameter("name");

String age=request.getParameter("age");

out.print(name+"  "+age);

out.flush();

out.close();

}

jQuery中ajax的应用

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

$(function(){

$("button:eq(0)").click(function(){

varparam={"name":"张三","age":"33" };

$.get("oneServlet",param,function(data){

alert(data);

});

});

$("button:eq(1)").click(function(){

$.getJSON("json/name.json",function(data){

alert(data);

for(vari=0;i

varmap=data[i];

alert(map.name+" "+map.age);

}

});

});

$("button:eq(2)").click(function(){

$.getScript("js/aa.js");

});

$("button:eq(3)").click(function(){

varparam={"name":"张三","age":33 };

$.post("oneServlet",param,function(data){

alert(data);

});

});

$("button:eq(4)").click(function(){

$("div").load("index.jsp");

});

});

get

getJSON

getScript

post

load

其中：

son/name.json

[{

"name":"zhangsan",

"age":"22"

},{

"name":"wangwu",

"age":"33"

},{

"name":"lisi",

"age":"44"

}]

js/aa.js

alert("aaaaaaaaaa");