Ajax jsp指定提交

最新推荐文章于 2021-08-06 12:26:02 发布
最新推荐文章于 2021-08-06 12:26:02 发布
阅读量967 收藏
点赞数
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxlstudio/article/details/17096187
版权

文件结构：



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（传参数）

1、get请求

 

 

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. %>  

 

2、post请求

 

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>  

 





a771948524
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP ajax from表单数据上传
qq_41921378的博客
08-03 350
JSP ajax from表单数据上传。
jsp用Ajax提交表单并显示结果（一）
Ask马小向的专栏
06-08 4065
1.代码业务：页面填写用户名和书号，提交，显示借阅结果，如果借阅不成功显示不成功原因，如果成功，显示借阅信息（读者号，书号，借书日期，应还日期） 2.首先，在基础mvc中，我在jsp页面用Ajax实现表单提交，传给sevlet的post方法，借阅的过程是用的存储过程borrow写的。 3.由于ajax传表单后台返回的数据必须是json格式的，所以，在基础版MVC，使用JSON.fromObje
ajax 提交数据到后台jsp页面及页面跳转问题
11-30
ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给logincheck.jsp $.ajax({ type : "POST", url : baseUrl+"m/module/querymodulebyname.do", dataType:"json", data: { modName:title }, succes
jsp用ajax提交给另一个jsp,ajax 如何提交数据到后台jsp页面，以及提交完跳转到jsp页面...
weixin_29832179的博客
08-05 558
我logincheck.jsp页面取传参数代码:String user=request.getParameter("user1");String pwd=request.getParameter("pwd1");login.jsp input 取2参数何用ajax 传给logincheck.jsp==================================$.ajax({type : "P...
ajax和jsp怎么提交数据,jquery ajax 如何向jsp提交表单数据
weixin_39626369的博客
08-06 748
AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要 “随波逐流”一把，不然饭碗不保啊！之前实现AJAX使用Javascript脚本一个一个敲出来的，很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了，当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquer...
Jsp页面简单的Ajax提交
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
10-25 2335
公用详情页返回按钮功能
健身俱乐部Web网站-JSP+Servlet+Hibernate+jQuery+Ajax
06-29
这是我做的第一个Web网站，前台页面主要利用JSP、jQuery（数据验证），部分页面用到Ajax。控制转发层采用Servlet，数据访问层采用Hibernate（bean和dao是由Hibernate逆向工程自动生成）。 系统采用分层架构，由上...
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
PostUser Ajax提交数据更新服务器内容 xmlhttpWeather 获取天气网站的内容 第11章（/C11/） 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3....
aa.js ajaxanywhere.js
08-07
form的action属性必须定义可以为空 表单通过post提交调用ajaxAnywhere.submitAJAX()方法，通过get提交，调用ajaxAnywhere.getAJAX()方法。 4.设定刷新域 在jsp中用在jsf中用 5.指定刷新区域 在jsp或者java代码控制...
JavaWeb网上图书商城完整项目资料
08-29
# 在提交时对所有输入框进行校验； # 在输入框得到焦点时，隐藏错误信息。 > 表单页面使用一次性图形验证码； > 在servlet中再次做了表单校验。 * 用户登录： > 表单校验与注册功能相同； > 登录成功时会把...
JavaScript内核系列
05-06
而当 AJAX流行起来之后，更多的非常绚丽的WEB应用涌现了，而且呈越来越多的趋势，如Gmail，Google Map，Google Reader，Remember the milk，facebook等等优秀的WEB2.0应用，都大量的使用了JavaScript及其衍生的技术...
jsp页面的ajax的post请求
大海无量的博客
04-28 9340
function netWorking(newpass) { //home_change var homeadmine= $("#home_change").text(); $.ajax({ type:"post", url:"${pageContext.request.contextPath }/ChangePasswordServlet"...
jsp页面ajax提交方式
ltfgood的专栏
03-14 1565
$.ajax({     type: "POST",     url: "getKmArrByKsdm.action",     dataType:'json',   //接受数据格式     async: 'false',     data: "ksdm="+ksdm, //参数     success: function(data){       if(data.errMsg != "") {     alert(data.errMsg);     return;    } else {        
JSP+Servlet+Ajax实现后台异步检验用户信息实例
wandering
08-12 717
下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。 一、说明：        1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。 二、基本流程：       1. JSP页...
jsp+ajax+servlet页面的提交，接收，显示数据流程
热门推荐
空空说技术的博客
11-08 1万+
jsp+ajax+servlet页面的提交，接收，显示数据流程 最近想写一些偏基础性的文章，主要是因为，有一些学弟学妹们可能基础比较薄弱，于是我把一些常用功能但是又容易混淆的地方单独挑出来说说，当然也是方便回顾一下知识。 一般来说，业务开发有一些场景是： 比如 前台发起一个数据请求，然后后台接收，到数据库查询到数据了，然后这时候数据怎么返回给前台页面呢？前台页面怎么接收这些数据呢？接收到这些数据...
【Jsp】Ajax提交数据不刷新页面
beatfan的博客
04-14 5692
传统的网页基本都是通过get或者post提交数据，但是一旦提交，本页面就被刷新了，即便提交到本页面，原本用户修改的数据就被清空了，这个场景在用户注册时，体验是很糟糕的。 Ajax为此而生，它可以提交数据，而不刷新页面，甚至可以更新局部信息，以下用实例来讲解。 Ajax使用JavaScript来实现，不仅在Jsp中可用，PHP、Asp.Net中同样可以用 先建立一个接收数据的servlet，名...
jsp页面ajax代码,ajax 如何提交数据到后台jsp页面，以及提交完跳转到jsp页面(示例代码)...
weixin_32065293的博客
08-05 493
我logincheck.jsp页面取传参数代码:String user=request.getParameter("user1");String pwd=request.getParameter("pwd1");login.jsp input 取2参数何用ajax 传给logincheck.jsp==================================$.ajax({type : "P...
jsp提交响应后无法调用sendRedirect（）
最新发布
06-10
如果在JSP中提交表单后，无法调用`sendRedirect()`方法进行重定向，可能是因为以下原因： 1. 在JSP中已经输出了响应体，导致无法再次进行重定向； 2. 在提交表单时，使用了异步请求（Ajax），而不是普通的表单提交...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值