`
sjk2013
  • 浏览: 2245772 次
文章分类
社区版块
存档分类
最新评论

利用AJAX是想JSP页面的单个控件的后台校验

 
阅读更多

xml:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../../common/common-js.jsp"%>
<%@ include file="../../../../common/common-taglibs.jsp"%>
<%@ include file="../../../../common/common-css.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'addMenu.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

tr {
background-color: #D8E4F2;
}
</style>
<script type="text/javascript">
function addMenu11() {
var common_d0020 = document.getElementById("d0020").value;
var common_d0030 = document.getElementById("d0030").value;
if (common_d0020.replace(/^\s*|\s*$/g, '') == "") {
alert("分类名称不能为空，请重新输入！");
} else if (common_d0030.replace(/^\s*|\s*$/g, '') == "") {
alert("排序不能为空，请重新输入！");
} else if (common_d0020.length > 50) {
alert("分类名称长度不超过50，请重新输入！");
} else if (common_d0030.length > 20) {
alert("排序长度超过20，请重新输入！");
} else {
document.forms[0].action = "{ctx}/menuCategoriesManager/addMenu.do";
document.forms[0].submit();
}

}

function checkNull(temp) {
if (temp.replace(/^\s*|\s*$/g, '') == "") {
return false;
} else {
return true;
}
}

function checkAjax(str){
//定义一个变量用于存放XMLHttpRequest对象
var xmlhttp;
//定义一个变量用于存放 从服务器返回的响应结果
var responseContext="";
//页面控件值
var td02 = document.getElementById("d0020").value;
var td03 = document.getElementById("d0030").value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
responseContext = xmlhttp.responseText;
if(checkNull(responseContext)){
alert(responseContext);
if(str==2){
document.getElementById("d0020").focus();
}else if(str==3){
document.getElementById("d0030").focus();
}
}
}
}
//向指定的URL建立服务器的调用
var url="";
if(str==2){
url="{ctx}/menuCategoriesManager/checkData.do?tempd0020="+td02;
}else{
url="{ctx}/menuCategoriesManager/checkData.do?tempd0030="+td03;
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send();
}


</script>
</head>

<body>
<form id="updateMenuForm"
action="${ctx}/menuCategoriesManager/addMenu.do" method="post">

<table style="border-collapse: collapse;">

<tr style="background-color: #D8E4F2;">
<td style="vertical-align: middle; text-align: center;">
分类名称
</td>
<td>
<input type="text" name="d0020" id="d0020" style="width: 100px"
onblur="checkAjax(2)" />
<input type="hidden" name="d0910" id="d0910" value="1"
style="width: 100px" />
</td>
</tr>
<tr style="background-color: #D8E4F2;">
<td style="vertical-align: middle; text-align: center;">
排序
</td>
<td>
<input type="text" name="d0030" id="d0030"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')"
style="ime-mode: disabled" style="width: 100px"
onblur="checkAjax(3)" />
</td>
</tr>
<tr style="background-color: #D8E4F2;">
<td align="right" align="right" colspan="2">
<input type="button" name="addMenu" value="添加"
onclick="addMenu11()" />
&nbsp;&nbsp;
<input type="button" name="" value="返回"
onclick="javascript:history.back(-1);" />
</td>
</tr>
</table>
</body>
</html>

action里的方法：

/**
* 校验输入不重复
*
* @return
*/
public String checkData() throws Exception {
try {
String reponseText = "";
String d0020 = "";
HttpServletRequest request2 = ServletActionContext.getRequest();
String d0020value = request2.getParameter("tempd0020");
String d0030 = request2.getParameter("tempd0030");
if (d0020value != null) {
d0020 = new String(d0020value.getBytes("ISO8859-1"), "GB2312");

}
int size = 0;
if (null != d0020 && !"".equals(d0020)) {
size = menucategoriesService.checkAjax(d0020);
if (size != 0) {
reponseText = "分类名称重复，请重新输入";
}
}
if (null != d0030 && !"".equals(d0030)) {
size = menucategoriesService.checkAjax3(d0030);
if (size != 0) {
reponseText = "排列序号重复，请重新输入";
}
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.println(reponseText);
out.flush();
out.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
}


分享到：
| window.XMLHttpRequest详解（AJAX工作原理 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax+jsp分页控件

    这里的“ajax+jsp分页控件”是一种技术解决方案，它允许用户在不刷新整个页面的情况下实现数据的分页加载，提供了更加流畅的用户体验。这种控件通常具有美观的界面设计，可以无缝地整合到各种Web应用中。 **Ajax...

    ajax+jsp局部页面刷新

    Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它允许在后台与服务器交换数据并更新部分网页，而无需重新加载整个页面。JSP（JavaServer Pages）则是基于Java的服务器端技术，用于生成...

    asp.net Ajax控件

    这主要利用AJAX的异步特性，通过后台服务处理评分逻辑，然后只更新与评分相关的部分页面内容。 无刷新验证用户名是一项重要的用户体验改进，传统的验证方式需要用户提交表单后才知道用户名是否已被占用，而使用ASP...

    jsp weboffice控件

    集成JSP WebOffice控件通常涉及以下几个步骤：下载控件库，配置Web应用服务器，将控件添加到JSP页面，编写Java后台代码处理文件操作，以及可能需要对前端页面进行定制以适应特定需求。此外，安全性和权限控制也是...

    ajax控件ajax控件

    ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...

    ajax +jsp 页面跳转

    ajax+jsp 带参数的页面跳转。

    ajax实现jsp页面表格

    在本案例中，“ajax实现jsp页面表格”是一个教学示例，它展示了如何利用AJAX技术动态地从数据库获取数据，并在JSP页面的表格中展示，而无需用户感知到页面刷新。 首先，我们来理解一下JSP（JavaServer Pages）。JSP...

    后台管理系统模版（jsp页面版）

    9. **AJAX技术**：为了提升用户体验，后台管理系统可能利用AJAX（Asynchronous JavaScript and XML）实现页面的部分刷新，使得数据更新无须重新加载整个页面。 10. **版本控制**：在开发过程中，使用Git或其他版本...

    Java Ajax分页,jsp ajax分页

    Java AJAX（Asynchronous JavaScript and XML）分页与JSP（JavaServer Pages）相结合，可以提供无需刷新整个页面即可动态加载更多内容的能力，提高用户体验。本教程将深入探讨如何使用AJAX、JavaScript以及MySQL...

    smartpaginator ajax jsp分页控件

    总结来说，SmartPaginator是一款强大的Ajax JSP分页控件，它利用jQuery简化了分页的实现，通过Ajax提升了用户体验。在项目中集成SmartPaginator，不仅可以高效地管理大数据，还能让网页更具现代感和互动性。通过深入...

    Ajax+JSP.rar_ajax_ajax jsp download_java ajax jsp_jsp ajax_jsp在线

    2. `postajax.jsp` 是接收Ajax请求的JSP页面，处理请求后返回数据。 3. `www.pudn.com.txt` 可能是下载链接或参考文档，可能与Ajax+JSP的实现有关。 学习Ajax+JSP的结合，不仅可以提升Web应用的性能，还能深入理解...

    java jsp ajax 部门人员选择控件

    本示例中的"java jsp ajax 部门人员选择控件"是一个典型的使用Ajax技术实现级联菜单的实例，这样的功能常见于组织结构或者部门与员工关系的管理中。级联菜单允许用户在选择一个选项后，自动更新并展示相关的子选项，...

    ASP.NET AJAX核心控件示例

    它使页面能够利用AJAX功能，包括对其他AJAX控件的支持。ScriptManager还允许集成第三方的JavaScript库，并且提供了对部分页面更新、错误处理和脚本调试的支持。 2. **UpdatePanel**: UpdatePanel是ASP.NET AJAX中的...

    利用ajax和jsp，JavaScript实现的注册系统

    在IT领域，尤其是在Web开发中，利用Ajax、JSP（JavaServer Pages）和JavaScript构建注册系统是一项基础且重要的技能。这个“luckregister”项目显然旨在教授开发者如何将这些技术结合起来，创建一个用户友好的前端...

    jsp 调用 jsp 的ajax写法 小例子

    总结，这个小例子展示了如何在JSP中利用AJAX进行页面间的通信，实现了前端与后端的交互，而无需刷新整个页面。这仅仅是AJAX技术的一个基础应用，实际上，你可以用它来执行更复杂的任务，如异步数据加载、表单验证等...

    AJAX控件

    AJAX（Asynchronous JavaScript and XML）控件是用于构建高度交互性和动态Web应用程序的技术，它允许页面的部分内容在不刷新整个页面的情况下进行更新。在Web开发领域，AJAX控件通常指的是那些利用AJAX技术来增强...

    用Ajax实现jsp页面树状结构

    综上所述，实现JSP页面的树状结构主要涉及JavaScript和Ajax技术，通过与后台交互动态加载数据，可以创建出交互性强、用户体验良好的树形视图。在设计和实现过程中，要兼顾性能、易用性和扩展性，以满足不同场景的...

    2.1 JSP页面基本结构 JSP+AJAX

    2.1 JSP页面基本结构 JSP+AJAX2.1 JSP页面基本结构 JSP+AJAX2.1 JSP页面基本结构 JSP+AJAX2.1 JSP页面基本结构 JSP+AJAX

    ajax控件技术--自定义的ajax控件

    AJAX通过XMLHttpRequest对象实现异步通信，它可以在后台与服务器进行通信，而无需刷新整个页面。JavaScript负责触发请求、处理响应以及更新DOM（文档对象模型）来更新页面内容。XML原本是AJAX数据交换的主要格式，但...

Magicbox
Global site tag (gtag.js) - Google Analytics