文件结构：
ajax url 获取提交
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提交：
<%@ 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",
//是否异步
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>
=================================================================================
一、简单的Ajax请求
1. <strong><script>
2. $(function() {
3. "input[type='button']").bind("click", function() {
4. /**Ajax的请求*/
5. $.ajax( {
6. //请求的路径
7. "json.html",
8. //是否异步
9. true,
10. //请求的方法
11. "get",
12. //请求成功时调用
13. function(msg) {
14. alert(msg);
15. },
16. //请求失败时调用
17. function(msg) {
18. alert(msg);
19. }
20. });
21. });
22. });
23. </script>
24. </strong>
<!—body部分-->
1. <body>
2. "button" value="Ajax请求"
3. </body>
二、Ajax请求jsp（传参数）
1、get请求
1. <strong><script type="text/javascript">
2. function(){
3. "input[type='button']").bind("click",function(){
4. /**Ajax的请求*/
5. $.ajax({
6. //请求的路径及所传的参数
7. "user.jsp?name=kouxiaolin",
8. //是否异步
9. true,
10. //请求的方法
11. "get",
12. //请求成功时调用
13. function(msg){
14. alert(msg);
15. },
16. //请求失败时调用
17. function(msg){
18. alert(msg);
19. }
20. });
21. });
22. });
23. </script>
24. </strong><!—user.jsp-->
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <%
3. "name");
4. if("kouxiaolin".equals(name)){
5. "用户名正确");
6. else{
7. "用户名错误");
8. }
9. %>
2、post请求
1. <strong><script>
2. $(function() {
3. //参数也可以在前面定义好，然后再后面调用
4. // var obj={name:"kouxiaolin",pass:"123"}; $("input[type='button']").bind("click", function() {
5. /**Ajax的请求*/
6. $.ajax( {
7. //请求的路径
8. "user.jsp",
9. //是否异步
10. true,
11. //请求方式
12. "post",
13. //所传参数多个参数用&连接：data:"name=kouxiaolin&pass=123"
14. "name=kouxiaolin",
15. //data：obj,
16. //请求成功时调用
17. function(msg) {
18. alert(msg);
19. },
20. //请求失败时调用
21. function(msg) {
22. alert(msg);
23. }
24. });
25. });
26. });
27. </script>
28. </strong>
三、Ajax请求解析json
1. <strong><script>
2. $(function() {
3. "input[type='button']").bind("click", function() {
4. /**Ajax的请求*/
5. $.ajax( {
6. //请求路径
7. "user.html",
8. //是否异步
9. true,
10. //请求的方法
11. "get",
12. //请求成功是调用
13. function(msg) {
14. //返回kouxiaolin
15. },
16. //请求失败时调用
17. function(msg) {
18. alert(msg);
19. },
20. //请求解析返回的类型是json类型
21. "json"
22. });
23. });
24. });
25. </script>
26. </strong>
