AJAX jQuery的验证用户登录的小程序用IntelliJ IDEA中编写

最新推荐文章于 2022-03-09 18:26:52 发布

iteye_20054

最新推荐文章于 2022-03-09 18:26:52 发布

阅读量447

点赞数 1

文章标签： jQuery Ajax IDEA Servlet Web ViewUI

本文链接：https://blog.csdn.net/iteye_20054/article/details/82002571

版权



------------------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