index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!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=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").bind("click",function(){ /**Ajax的请求*/ $.ajax({ //请求的路径及所传的参数 url:"user.jsp",data:{//发送给数据库的数据 username:$("#username").val(),content:$("#content").val() },//是否异步 async:true,//请求的方法 type:"get",//请求成功时调用 success:function(msg){ alert(msg); },//请求失败时调用 error:function(msg){ alert(msg); } }); }); }); </script> </head> <body> <body> <input type="text" id ="username" class="username" /> <input type="text" id ="content" class="content" /> <input type="button" value="Ajax请求" /> </body> </body> </html>
user.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String name = request.getParameter("username"); String content = request.getParameter("content"); if("zxl".equals(name)){ out.print("用户名正确"+content); }else{ out.println("用户名错误"); } %>
ajax 指定url提交:@H_502_2@
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!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=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").bind("click",function(){ /**Ajax的请求*/ $.ajax({ //请求的路径及所传的参数 url:"user.jsp?username=zxl",//请求失败时调用 error:function(msg){ alert(msg); } }); }); }); </script> </head> <body> <body> <input type="text" id ="username" class="username" /> <input type="text" id ="content" class="content" /> <input type="button" value="Ajax请求" /> </body> </body> </html>
=================================================================================@H_502_2@
一、简单的Ajax请求
Js代码
- <strong><script>@H_502_2@
- $(function@H_502_2@(){@H_502_2@
- $("input[type='button']"@H_502_2@).bind("click"@H_502_2@,function@H_502_2@(){@H_502_2@
- /**Ajax的请求*/@H_502_2@@H_502_2@
- $.ajax({@H_502_2@
- //请求的路径@H_502_2@@H_502_2@
- url:"json.html"@H_502_2@,@H_502_2@
- //是否异步@H_502_2@@H_502_2@
- async:true@H_502_2@,0)">//请求的方法@H_502_2@@H_502_2@
- type:"get"@H_502_2@,0)">//请求成功时调用@H_502_2@@H_502_2@
- success:function@H_502_2@(msg){@H_502_2@
- alert(msg);@H_502_2@
- },0)">//请求失败时调用@H_502_2@@H_502_2@
- error:function@H_502_2@(msg){@H_502_2@
- alert(msg);@H_502_2@
- }@H_502_2@
- });@H_502_2@
- });@H_502_2@
- });@H_502_2@
- </script>@H_502_2@
- </strong>@H_502_2@
<!—body@H_502_2@部分-->@H_502_2@
Java代码
<body>@H_502_2@
<inputtype="button"@H_502_2@value="Ajax请求"@H_502_2@/>@H_502_2@
</body>@H_502_2@
二、Ajax请求jsp(传参数)
Js代码
<strong><scripttype="text/javascript"@H_502_2@>@H_502_2@
$(//请求的路径及所传的参数@H_502_2@@H_502_2@
url:"user.jsp?name=kouxiaolin"@H_502_2@,85)">function@H_502_2@(msg){@H_502_2@
alert(msg);@H_502_2@
}@H_502_2@
});@H_502_2@
});@H_502_2@
});@H_502_2@
</script>@H_502_2@
</strong>@H_502_2@
<!—user.jsp-->@H_502_2@
Java代码
<%@pagelanguage="java"@H_502_2@import@H_502_2@="java.util.*"@H_502_2@pageEncoding="UTF-8"@H_502_2@%>@H_502_2@
<%@H_502_2@
Stringname=request.getParameter("name"@H_502_2@);@H_502_2@
if@H_502_2@("kouxiaolin"@H_502_2@.equals(name)){@H_502_2@
out.print("用户名正确"@H_502_2@);@H_502_2@
}else@H_502_2@{@H_502_2@
out.println("用户名错误"@H_502_2@);@H_502_2@
}@H_502_2@
%>@H_502_2@
Js代码
//参数也可以在前面定义好,然后再后面调用@H_502_2@@H_502_2@
//varobj={name:"kouxiaolin",pass:"123"};$("input[type='button']").bind("click",function(){@H_502_2@@H_502_2@
//请求的路径@H_502_2@@H_502_2@
url:"user.jsp"@H_502_2@,0)">//请求方式@H_502_2@@H_502_2@
type:"post"@H_502_2@,0)">//所传参数多个参数用&连接:data:"name=kouxiaolin&pass=123"@H_502_2@@H_502_2@
data:"name=kouxiaolin"@H_502_2@,0)">//data:obj,@H_502_2@@H_502_2@
function@H_502_2@(msg){@H_502_2@
alert(msg);@H_502_2@
}@H_502_2@
});@H_502_2@
});@H_502_2@
});@H_502_2@
</script>@H_502_2@
</strong>@H_502_2@
三、Ajax请求解析json
Js代码
//请求路径@H_502_2@@H_502_2@
url:"user.html"@H_502_2@,0)">//请求成功是调用@H_502_2@@H_502_2@
success:function@H_502_2@(msg){@H_502_2@
alert(msg.name);//返回kouxiaolin@H_502_2@@H_502_2@
},0)">//请求解析返回的类型是json类型@H_502_2@@H_502_2@
dataType:"json"@H_502_2@@H_502_2@
});@H_502_2@
});@H_502_2@
});@H_502_2@
</script>@H_502_2@
</strong>@H_502_2@