JQuery提交Ajax请求

最新推荐文章于 2024-09-17 14:30:35 发布

原创最新推荐文章于 2024-09-17 14:30:35 发布 · 8.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #function #html #button #jsp

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Ajax技术实现客户端与Struts2框架进行异步数据交换的例子。通过具体的代码展示了如何发送Ajax请求到Struts2后端，并接收返回的数据。文中详细解释了Ajax设置、数据类型、错误处理及成功响应的处理方式。

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>My JSP 'test.jsp' starting page</title>
	<mce:script type="text/javascript" src="js/jquery14.js" mce_src="js/jquery14.js"></mce:script>
	
	<mce:script type="text/javascript"><!--
		$(document).ready(
			function()
			{
				$("#load").click(
					function()
					{
						//$("#target").load('/Struts2Test/test/load.action');
									
						$.ajax(
							{
								url:'/Struts2Test/test/load.action',
								type:"post",
								async:true,
								data:{'userId':'kkkk', 'password':'jjjj'},
								dataType:"html",
								timeout:"1000",
								error:function(){alert("服务加载出错");},
								success:function(data)
										{
											alert(data);
											$("#target").html(data);
											alert("服务加载成功");
										}
							}
						);									
										
						/*
						$("#target").load(
							'/Struts2Test/test/load.action',
							{'userId':'kkkk', 'password':'jjjj'},
							function(data)
							{
								alert(data);
								$("#target").html(data);
							}
						);*/			
						
						/*
						$.post(
							'/Struts2Test/test/load.action',
							{'userId':'kkkk', 'password':'jjjj'},
							function(data)
							{
								alert(data);
								$("#target").html(data);
							}
						);
						*/
						return false;
					}
				);
			}
		);
	
// --></mce:script>
  </head>
  
  <body>
    
    <input type="button" id="load"/>
    
    <div id="target"></div>
    
  </body>
</html>