1、jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
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%>">
<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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.focus{
border:1px solid #foo;
background:#fcc;
}
.username{
border:1px solid #foo;
background:#fcd;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$(":input").focus(function(){//选中所有input、textarea、select、button
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})
});
function registerFun(){
$(document).ready(function(){
//alert($("#username").val());
})
$(document).ready(function(){
//alert($("#password").val());
})
//jquery----dom
//var $username=$("#username");//jquery对象
//var username=$username[0];//dom对象-1
//var username=$username.get(0);//dom对象-2
//alert(username.value);
//dom-----jquery
var username=document.getElementById("username");//dom对象
var $username =$(username);//jquery对象
//alert($username.get(0).value);
//获得name为sex选中的值
//var $sex=$("input[name=sex]:checked");
//alert($sex.get(0).value);
//循环checkbox
$("input[name=hobby]:checked").each(function(){
//alert(this.value);
})
//select
//alert($(".city").val());
$("#street option:selected").each(function(){
alert(this.value);
})
}
$(document).ready(function(){
//document.getElementById('uname').style.display="none";
//$("#uname").css("display","none");
//$("#uname").hide();
//$("#pwd").hide();
$("#uname").attr('style','display:none');
$("#pwd").attr('style','display:none');
$("#loading").attr('style','display:none');
$("#loading").ajaxStart(function(){
$(this).show();
$("#btn").attr("disabled",true);
}).ajaxStop(function(){
$(this).hide();
$("#btn").attr("disabled",false);
})
});
function register(){
if($("#username").val()==''){
$("#uname").show();
return false;
}
if($("#password").val()==''){
$("#pwd").show();
return false;
}
//$("#btn").attr("disabled",true);
$("#btn").click(function(){
//1、载入html文档
//$("#test").load("common/test.xhtml",function(responseText,textStatus,XMLHttpRequest){
// if(textStatus=="success"){
// $("#btn").attr("disabled",false);
// }
//});
//2、返回字符串、xml、json $.get
$.post("BBSIbatis/register.action",
{
username:$("#username").val(),
password:$("#password").val()
},function(data,textStatus){
//$("#test").html(data);//将返回的数据添加到页面上
//alert(data);//返回字符串
//返回xml格式out.print("<student><age>18</age><name>wz</name></student>");
//var returnValue=$(data).find("name").text();
//$("#test").html(returnValue);
//json {"result":{"id":1,"value":2}}
$(data).each(function(){
alert(data.result.id+":"+data.result.value);
})
//返回json格式
//var name=data.name;
//var age=data.age;
//$("#test").html("姓名："+name+"年龄："+age);
},"json")//json格式添加
});
}
//$.ajax
function registerAjax(){
if($("#username").val()==''){
$("#uname").show();
return false;
}
if($("#password").val()==''){
$("#pwd").show();
return false;
}
//$("#btn").attr("disabled",true);
$("#btn").click(function(){
$.ajax({
type:"post",
url:"BBSIbatis/registerCheck.action",
//dataType:"text",//返回的类型json,xml
//data:{username:1,password:2},
data:"username="+$("#username").val()+"&password="+$("#password").val(),//key，value
success:function(dataReturn){
//json
//var name=dataReturn.name;
//var age=dataReturn.age;
// $("#test").html("姓名："+name+"年龄："+age);
//alert(dataReturn)
//返回html
if(dataReturn=="success"){
redirectIndex();
}else{
$("#uname").show();
$("#uname").html(dataReturn);
}
},error:function(dataReturn){
}
})
})
}
</script>
<body>
<div id="loading">注册中。。。</div>
<TABLE>
<form action="/register" id="frm" name="registerFrm">
<TR><TD>用户名：</TD><TD><input type="text" name="user.name" id="username"/></TD><TD><DIV ID="uname">用户名不能为空</DIV></TD></TR>
<TR><TD>密码: </TD><TD><input type="text" name="user.pwd" id="password"/></TD><TD><DIV ID="pwd">密码不能为空</DIV></TR>
<TR><TD>性别：</TD><TD><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0" />女</TD></TR>
<tr><td>爱好：</td><td><input type="checkbox" name="hobby" value="篮球 " />篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="拍球"/>拍球</td></tr>
<tr><td>地区：</td><td>
<select id="dis" name="city" class="cityuu">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="wuhan">武汉</option>
</select></td></tr>
<tr><td>街道：</td><td>
<select id="street" name="street" multiple>
<option value="shunyi">顺义</option>
<option value="chaoyang">朝阳</option>
<option value="haidian">海淀</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="提交" onclick="register()" id="btn"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</form>
</TABLE>
<div id="test"></div>
</body>
</html>
2、action
public String registerCheck(){
//xml
//getHttpServletResponse().setContentType("text/xml;charset=utf-8");
//json
//getHttpServletResponse().setContentType("text/json;charset=utf-8");
String username=getHttpServletRequest().getParameter("username");
String password=getHttpServletRequest().getParameter("password");
//解决返回页面乱码问题html
getHttpServletResponse().setHeader("Cache-Control", "no-cache");
getHttpServletResponse().setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try {
out = getHttpServletResponse().getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//xml
//out.print("<student><age>18</age><name>王欣</name></student>");
//json
//out.print("{name:'王欣',age:'18'}");
//out.print("{result:{id:1,value:2}}");
//html
if("wz".equals(username)){
out.print("success");
}else{
out.print("用户名"+username+"不存在");
}
return null;
}
分享到：
相关推荐
《jQuery读书笔记》 在深入理解JavaScript库的过程中，jQuery无疑是一个绕不开的重要角色。这篇读书笔记将基于jQuery的API文档，结合实际应用，探讨其核心功能和使用技巧，旨在帮助读者更好地掌握这一强大的工具。 ...
jQuery+AJAX学习笔记
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
这些知识点涵盖了 jQuery 的基本用法、DOM 操作、CSS 样式调整、事件处理以及 AJAX 支持等方面。 ### 一、jQuery 基础 1. **选择器**：jQuery 提供了一种简单的方式来选择页面中的元素。例如： - `$()`：这是 ...
### Ajax与JQuery达内培训笔记精要 #### Ajax概览 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现...
JS-Ajax-jQuery笔记，学习笔记，JavaScript，JS-Ajax-jQuery笔记，学习笔记，JavaScript，
Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架，...
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
6. **Ajax请求**：jQuery的`.ajax()`和衍生方法如`.get()`, `.post()`，简化了异步数据请求，便于实现动态加载和更新页面内容。 学习笔记可能涵盖以下主题： 1. **基础概念**：解释JavaScript和jQuery的基本原理和...
首先，我们来看看"韩顺平AJAX和jQuery笔记整理.doc"。AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，而jQuery对AJAX提供了出色的封装，使得异步数据交换变得更加简单。在这个文档中，你将了解...
- 当前，许多前端框架（如jQuery、Vue.js、React.js）提供了更高级的API来简化AJAX操作，如jQuery的`$.ajax()`或`$.get()`，Vue.js的`axios`库等。 通过分析`index.jsp`和`easy.jsp`，我们可以深入了解AJAX的工作...
7. **Ajax与jQuery**：jQuery库简化了Ajax操作，提供了如`$.ajax()`, `$.get()`, `$.post()`等便捷函数，使得代码更加简洁。 8. **Promise和Fetch API**：随着ES6和Fetch API的引入，现代JavaScript中处理Ajax请求...
### 韩顺平AJAX和jQuery笔记整理 #### AJAX概览 - **定义**：Asynchronous JavaScript and XML（异步JavaScript与XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - **运行原理**： - ...
JavaScript，Ajax，jQuery是Web开发中的核心技术，它们在构建交互式和动态网页方面发挥着关键作用。以下是对这些技术的详细说明： 1. **JavaScript**： - **基础概念**：JavaScript是一种轻量级的解释型编程语言，...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**Ajax（Asynchronous JavaScript and XML）与jQuery技术详解** Ajax是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过创建XMLHttpRequest对象实现后台与服务器的异步数据...
摘要：本节补充ajax学习笔记1中 第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的...
这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...
### jQuery完全笔记知识点概述 #### 1. jQuery概述 jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery，可以更方便地在网页中操作文档对象、选择...