关闭

Ajax jsp指定提交

754人阅读 评论(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网站的观点或立场

jsp用Ajax提交表单并显示结果(一)

1.代码业务:页面填写用户名和书号,提交,显示借阅结果,如果借阅不成功显示不成功原因,如果成功,显示借阅信息(读者号,书号,借书日期,应还日期) 2.首先,在基础mvc中,我在jsp页面用Ajax实现...
  • happymatilian
  • happymatilian
  • 2015-06-08 14:00
  • 1790

Spring MVC 系列(四)——Spring MVC 与Ajax交互及重定向操作

一、Spring MVC 与Ajax交互 一般情况下,Controller中方法返回值类型有两种 1、String 直接跳转到某View界面 2、Void 不需要进行页面跳转,直接访问下一个方法...
  • Daybreak1209
  • Daybreak1209
  • 2016-02-15 15:45
  • 9523

基本的JSP中调用Ajax与Servlet进行数据交互

首先创建jsp页面中  然后在页面中写入js代码! ">
  • u011031689
  • u011031689
  • 2016-03-12 18:11
  • 12627

ajax在spring环境下,从前端jsp页面传送页面提交值到后端controller

时间:2017/3/2 地点:新安 项目名:AjaxJson 项目描述:ajax在spring环境下,从前端jsp页面传送页面提交值到后端controller,controller接收打印到控制器,...
  • qq_36500554
  • qq_36500554
  • 2017-04-20 18:15
  • 130

jquery ajax提交表单从action传值到jsp

jsp页面: Javascript代码   var clientTel = $("#clientTel").val();        ...
  • liweifengwf
  • liweifengwf
  • 2013-01-29 15:06
  • 3199

登录页面ajax提交

一:jsp登录页面: 用户登录 用户名: ...
  • masuwen
  • masuwen
  • 2011-07-29 14:59
  • 11148

jsp用Ajax提交表单并显示结果(一)

1.代码业务:页面填写用户名和书号,提交,显示借阅结果,如果借阅不成功显示不成功原因,如果成功,显示借阅信息(读者号,书号,借书日期,应还日期) 2.首先,在基础mvc中,我在jsp页面用Ajax实现...
  • happymatilian
  • happymatilian
  • 2015-06-08 14:00
  • 1790

【Jsp】Ajax提交数据不刷新页面

传统的网页基本都是通过get或者post提交数据,但是一旦提交,本页面就被刷新了,即便提交到本页面,原本用户修改的数据就被清空了,这个场景在用户注册时,体验是很糟糕的。 Ajax为此而生,它可以提交...
  • u010875635
  • u010875635
  • 2017-04-14 11:01
  • 1062

从jsp页面发送ajax请求,servlet接受参数并返回json数据

博主注册了CSDN好久了,一直没写过(哈哈) 今天遇到了问题把我难住了,解决之后就赶紧来记下来 这是一个很简单的更新用户的问题 先来看看项目所需jar包 接下来就是jsp页面的东西,ajax发送i...
  • yanghan1222
  • yanghan1222
  • 2017-11-05 00:16
  • 256

基本的JSP中调用Ajax与Servlet进行数据交互

首先创建jsp页面中  然后在页面中写入js代码! ">
  • u011031689
  • u011031689
  • 2016-03-12 18:11
  • 12627
    个人资料
    • 访问:832824次
    • 积分:13017
    • 等级:
    • 排名:第1210名
    • 原创:420篇
    • 转载:267篇
    • 译文:0篇
    • 评论:39条
    文章分类
    最新评论