------------------web/jslib/verify.js
function verify(){
// 首先测试一下页面的按钮按下,可以调用这个方法
// 使用javascript的alert方法,显示一个弹出提示框
// alert("按钮被点击了");
// 1获取文本框的内容
// document.getElementById("userName"); dom的方式
//Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点,这是css23定义的表达式方式
//Jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
// $是 jQuery.api中核心中的 jQuery(expression,[context])的$("");
//#是ID选择器 里边是你的名称
var jqueryObj = $("#userName");
// 获取节点的值
// .val()是 jQuery.api中属性的值中的 val()
// 获取文本框中的值
//html中的代码<input type="text" value="some text"/>
//jQuery中的代码 $("input").val(); 结果为some text
var userName =jqueryObj.val();
// alert(userName);
// 2将文本框中的数据发送给服务器端的servlet
// 使用jquery的XMLHTTPrequest对象
// $.get()是 jQuery.api中Ajax中Ajax事件的jQuery.get(url,[data],[callback],[type])
//
$.get('AJAXServer?name='+userName,null,callback);
}
function callback(data){
// alert("服务器端的数据回来了");
// 3接收服务器端返回的数据
alert(data);
// 4将服务器 端返回的数据动态的显示在页面上
//通过id找到保存结果信息的节点
//$("div").html(val); 是jQury.api中属性html(val)中的方法
$("#result").html(data);
}
------------------web/web-inf
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
</web-app>
------------------ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/verify.js"></script>
<script type="text/javascript" src="jslib/jquery.js"></script>
</head>
<body>
AjaxServer实例<br>
<!-- Ajax不需要form表单来提交数据-->
<!-- Ajax不需要name-->
username:<input type="text" id="userName"/>
<input type="button" value="检验" onclick="verify()"/>
<!-- 这个div用于存放服务器端返回的信息,开始为空-->
<!-- id属性定义是为了利用dom的方式找到一个节点,进行操作-->
<div id="result"></div>
<!--
<div>123</div> <div>456</div>
<span>123</span> <span>456</span>
div和span的差异 div独占一行 span中的内容和其他内容相处良好-->
</body>
</html>
------------------src/AJAXServer
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2011-1-24
* Time: 14:16:34
* To change this template use File | Settings | File Templates.
*/
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try {
httpServletResponse.setContentType("text/html;charset=GB2312");
PrintWriter out = httpServletResponse.getWriter();
//1.取参数
String old = httpServletRequest.getParameter("name");
//2.检查参数是否有问题
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
//3.校验操作
String name = old;
if (name.equals("zyl")) {
//4.将用户感兴趣的数据返回给页面
out.println("用户名[" + name + "]已经存在,请使用其他用户名");
} else {
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册");
}
}
out.println("返回校验页面");
} catch (Exception e) {
e.printStackTrace();
}
}
}
------------------web/jslib/jQuery.js
分享到:
相关推荐
此项目用IntelliJ IDEA 13.1.3编写,所用到的技术有springMVC注解,,jQuery,jQuery-Easyui,JSON,JS技术,Maven技术,Ajax无刷新登录,注册等等,Mybatis技术,还有导出Excel通用方法,通用类有需要的朋友可以下下来...
注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,拦截器,如果用户没有登录则不能进行相应操作...
超爽ajax+jquery实例,开发工具IntelliJ IDEA ,代码提供多种实现方式,稍作修改就有不同效果
Springmvc+maven+ajax+jquery+json+mybatis做的异步登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用IntelliJ IDEA 13.1.3运行出来.并且付有sql脚本.可直接导入运行...
功能: 区分为管理员用户和普通用户,普通用户:用户登录,个 人信息修改,图书查询,用户借阅,用户归还,管理员用 户:图书馆里,归还管理,借阅信息查询,图书维护,分 类管理,读者管理等等功能。 二、项目运行 ...
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...
注:此项目用IntelliJ IDEA 13.1.3编写,所用到的技术有springMVC注解,,jQuery,jQuery-Easyui,JSON,JS技术,Maven技术,Ajax无刷新登录,注册等等,并且赋有非常详细的注释,sql脚本。让你一看即明,在此项目中还...
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...
用intellij idea做的一些ajax +jquery+css 一些例子,内有jquery.js ,css帮助文档等
IDEA使用基础教程 简洁 实用 快速入门IDEA IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,...Intellij IDEA 最突出的功能自然是调试(Debug),可以对Java代码,JavaScript,JQuery,Ajax等技术进行调试。
环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术: JSP +Spring + SpringMVC + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui+ maven等等。
基于SpringBoot+Vue校园失物招领系统主要通过使用Java语言编码设计系统功能,MySQL数据库管理数据,AJAX技术设计简洁的、友好的网址页面,然后在IDEA开发平台中,编写相关的Java代码文件,接着通过连接语言完成与...
环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术: JSP +SpringBoot + MyBatis + html+ css + JavaScript + JQuery + Ajax + Bootstrap+ maven 等等。
功能: 区分为管理员用户和普通用户,普通用户:用户注册登录,首页水果展示,商品分类展示,购物车添加,下单,订单查询,个人信息修改,管理员用户:包括水果基本信息维护增删改查,分类管理,订单管理,用户管理...