prototype -通过js提交表单，局部刷新不跳转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<script type="text/javascript" src="prototype_for_upload.js"></script>
<script type="text/javascript">
function formSubmit()
{
$('frmFileUpload').formUpdate({
handler:'result', loadingmsg:'请稍候,正在提交...' , fn:updateOpener
});
}
var updateOpener = function(result)
{
//alert("我成功了！");
//window.location.reload();//重新刷新页面
}
</script>
</head>
<body>
<div id='result'></div>
<form id="frmFileUpload" name="form1" action="<%=request.getContextPath()%>/hotelManage.do?method=saveHotelImage1" method="post" enctype="multipart/form-data">
<table>............</table>
</form>
<form id="form2" name="form2" action="<%=request.getContextPath()%>/hotelManage.do?method=saveHotelImage1" method="post"> <table>............</table>
</form>
</body>
</html>
分享到：
相关推荐
Prototype可以很容易地模拟HTML表单的提交，将表单数据通过Ajax发送到服务器，避免页面跳转。 7. **HTTP方法**： Prototype支持GET和POST之外的HTTP方法，如PUT、DELETE，这些在RESTful API中很常见。 8. **JSON...
它通过JavaScript获取用户输入，使用XMLHttpRequest对象向服务器发送异步请求，获取服务器响应后，再利用DOM（Document Object Model）动态更新页面内容，这一过程用户几乎察觉不到页面刷新，提升了交互速度和用户...
- AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器交换数据并局部更新页面。 - 使用`XMLHttpRequest`对象或现代浏览器的`fetch` API进行异步请求。 6. **闭包** - 闭包是...
服务器接收到请求后处理数据，返回结果，JavaScript再通过回调函数解析这些数据，并更新DOM树，实现局部刷新。Ajax的优点包括提升用户体验，减少网络流量，以及简化前后端交互流程。 二、Ajax应用实例 Ajax广泛应用...
不过，Ajax也并非无懈可击，它可能带来的问题包括浏览器兼容性、SEO难题以及可能导致的页面局部刷新导致的用户体验问题。 在开发Ajax应用时，可以选择各种工具和库，如jQuery、Prototype等，它们提供了更简洁的API...
AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提升了用户体验。 **模块化** 随着代码规模的扩大，JavaScript引入了模块化机制，如CommonJS（Node.js...
- **表单提交**：无需刷新页面即可验证和提交数据。 - **实时更新**：如股票报价、聊天室、在线协作工具等。 - **分页和无限滚动**：加载更多内容时无需跳转页面。 - **地图应用**：拖动或缩放地图时加载新区域。 #...
4. 阻止默认行为：event.preventDefault()方法可以阻止事件的默认行为，如链接跳转、表单提交等。 DOM操作： 1. DOM（Document Object Model）：HTML和XML文档的结构化表示，JavaScript通过DOM API操作页面元素。 2...
传统的网页在提交表单时会刷新整个页面，而Ajax则可以在用户无感知的情况下提交数据，使得用户体验更为流畅。例如，在一个在线购物网站上，用户可以使用Ajax实时更新购物车信息，而无需跳转到新的页面。 其次，Ajax...
11. AJAX：利用XMLHttpRequest或fetch API实现异步数据请求，实现页面局部刷新。 12. Web API：包括定时器（setTimeout, setInterval）、地理位置API、存储API（localStorage, sessionStorage）等，用于增强网页...
2. **表单提交**：验证用户输入，无需刷新页面即可显示错误信息或处理结果。 3. **实时反馈**：如评论、点赞功能，用户操作后立即显示反馈。 4. **导航菜单**：无需跳转页面，就能加载新的页面内容。 5. **搜索建议*...
当接收到服务器响应后，JavaScript可以通过DOM API修改页面元素，比如添加新的内容、改变现有内容或者隐藏某些元素，从而实现页面的局部更新。 ### 3. 数据格式 尽管名字中含有XML，但Ajax传输的数据并不限于XML...
总之，Ajax 是现代 Web 开发中的重要技术，它通过 JavaScript 和 XMLHttpRequest 对象实现了页面的局部刷新，使得用户能够享受到更加流畅的交互体验。通过理解和掌握 Ajax，开发者可以创建出更加高效、动态的 Web ...
它通过在后台与服务器进行少量数据交换，使网页实现局部刷新，提高了用户体验，尤其是在处理大量数据或交互频繁的应用场景中。 ### 为何使用AJAX 1. **改善用户体验**：AJAX允许页面部分更新，用户无需等待整个...
2. Ajax介绍：Ajax的核心是利用JavaScript在后台与服务器进行异步数据交换，无需刷新整个页面就能更新局部内容。它提高了用户体验，使网页更加响应式。Ajax通过XMLHttpRequest对象实现与服务器的通信，通常包括发送...
JavaScript实例精通 1．本书1~20章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：、Dreamwave、Notepad、UltraEdit，或者其他文本编辑器 Web服务器：IIS 5.1及...
示例描述：Prototype基础应用。 17_1.htm 使用$()得到html元素。 17_2.htm 使用$F()返回表单输入控件的值。 17_3.htm 使用$A()将单个的参数转换成Array对象。 17_4.htm 使用$H()把一些对象转换成Hash对象。 ...
10. **AJAX和Fetch API**：这两个API用于异步请求服务器数据，更新页面而不需刷新。Fetch API是现代浏览器更推荐的方法，具有更好的错误处理和返回Promise的优势。 11. **事件和事件处理**：JavaScript事件机制允许...