关闭

Ajax jsp指定提交

692人阅读 评论(0) 收藏 举报
分类:

文件结构:



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请求

Js代码  收藏代码
  1. <strong><script>  
  2. $(function() {  
  3.     $("input[type='button']").bind("click"function() {  
  4.         /**Ajax的请求*/  
  5.         $.ajax( {  
  6.             //请求的路径  
  7.             url : "json.html",  
  8.             //是否异步  
  9.             async : true,  
  10.             //请求的方法  
  11.             type : "get",  
  12.             //请求成功时调用  
  13.             success : function(msg) {  
  14.                 alert(msg);  
  15.             },  
  16.             //请求失败时调用   
  17.             error : function(msg) {  
  18.                 alert(msg);  
  19.             }  
  20.         });  
  21.     });  
  22. });  
  23. </script>  
  24. </strong>  

 

<!—body部分-->

Java代码  收藏代码
  1. <body>  
  2.     <input type="button" value="Ajax请求" />  
  3. </body>  

 

二、Ajax请求jsp(传参数)

1get请求

 

 

Js代码  收藏代码
  1. <strong><script type="text/javascript">  
  2.     $(function(){  
  3.         $("input[type='button']").bind("click",function(){  
  4.             /**Ajax的请求*/  
  5.             $.ajax({  
  6.                 //请求的路径及所传的参数  
  7.                 url:"user.jsp?name=kouxiaolin",  
  8.                 //是否异步  
  9.                 async:true,  
  10.                 //请求的方法  
  11.                 type:"get",  
  12.                 //请求成功时调用  
  13.                 success:function(msg){  
  14.                 alert(msg);  
  15.                 },  
  16.                 //请求失败时调用  
  17.                 error:function(msg){  
  18.                 alert(msg);  
  19.                 }  
  20.             });  
  21.         });  
  22.     });  
  23. </script>  
  24. </strong>  

 

<!—user.jsp-->

 

Java代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.    String name = request.getParameter("name");  
  4.    if("kouxiaolin".equals(name)){  
  5.      out.print("用户名正确");  
  6.    }else{  
  7.      out.println("用户名错误");  
  8.    }  
  9. %>  

 

2post请求

 

Js代码  收藏代码
  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.             url : "user.jsp",  
  9.             //是否异步    
  10.             async : true,  
  11.             //请求方式  
  12.             type : "post",  
  13.             //所传参数多个参数用&连接:data:"name=kouxiaolin&pass=123"  
  14.             data:"name=kouxiaolin",  
  15.             //data:obj,  
  16.             //请求成功时调用  
  17.             success : function(msg) {  
  18.                 alert(msg);  
  19.             },  
  20.             //请求失败时调用  
  21.             error : function(msg) {  
  22.                 alert(msg);  
  23.             }  
  24.         });  
  25.     });  
  26. });  
  27. </script>  
  28. </strong>  

 

三、Ajax请求解析json

Js代码  收藏代码
  1. <strong><script>  
  2. $(function() {  
  3.     $("input[type='button']").bind("click"function() {  
  4.         /**Ajax的请求*/  
  5.         $.ajax( {  
  6.             //请求路径  
  7.             url : "user.html",  
  8.             //是否异步  
  9.             async : true,  
  10.             //请求的方法  
  11.             type : "get",  
  12.             //请求成功是调用  
  13.             success : function(msg) {  
  14.                 alert(msg.name);//返回kouxiaolin  
  15.             },  
  16.             //请求失败时调用  
  17.             error : function(msg) {  
  18.                 alert(msg);  
  19.             },  
  20.             //请求解析返回的类型是json类型  
  21.             dataType:"json"  
  22.         });  
  23.     });  
  24. });  
  25. </script>  
  26. </strong>  

 





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:760170次
    • 积分:12047
    • 等级:
    • 排名:第1257名
    • 原创:420篇
    • 转载:267篇
    • 译文:0篇
    • 评论:37条
    文章分类
    最新评论