AJAX jQuery的应验用户登录的小程序用IntelliJ IDEA中编写
日期：2014-05-16 浏览次数：20757 次
AJAX jQuery的验证用户登录的小程序用IntelliJ IDEA中编写
------------------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.equa
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
