Ajax（二）

来源：互联网发布：山东多趣网络靠谱么编辑：程序博客网时间：2024/06/06 06:37

下载jquery地址：http://www.jq22.com/jquery-info122

下载完成后copy到WebRoot目录下

把Ajax（一）转为Ajax

userValidate.java文件不变，复制index.jsp文件命名为indexAjax.jsp

indexAjax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'index.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">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>    <script type="text/javascript">        function userNameValidate(){            var userName = document.getElementById("userName").value;            $.ajax({                url:"UserValidate",                data:"userName=" + userName,                dataType:"text",                success:function (data){                    $("#nameValidateReturn").html(data);                },                error:function (){                    alert("出错了！");                }            });        }        function userPasswordValidate(){            var userPassword = document.getElementById("userPassword").value;            $.ajax({                url:"UserValidate",                data:"userPassword=" + userPassword,                dataType:"text",                success:function (data){                    $("#passwordValidateReturn").html(data);                },                error:function (){                    alert("出错了！");                }            });        }        function userIsNull(){            var userName = document.getElementById("userName").value;            var userPassword = document.getElementById("userPassword").value;            if(userName == ""){                alert("请输入用户名！");                return false;            }            if(userPassword == ""){                alert("请输入密码！");                return false;            }            var nameValidateReturn = document.getElementById("nameValidateReturn").innerHTML;            var passwordValidateReturn = document.getElementById("passwordValidateReturn").innerHTML;            if(nameValidateReturn == "ok"){                if(passwordValidateReturn =="ok"){                    alert("登陆成功！");                    return true;                }else{                    alert(passwordValidateReturn);                    return false;                }            }else{                alert(nameValidateReturn);                return false;            }        }    </script>  </head>  <body>    <form action="#" method="post" onsubmit="return userIsNull();">        <table cellspacing="15">            <tr>                <td>用户名：</td>                <td><input type="text"  id="userName" onblur="userNameValidate()" /></td>                <td><span id="nameValidateReturn" style="color:#EE7621;"></span></td>            </tr>            <tr>                <td align="right">密码：</td>                <td><input id="userPassword" type="password" onblur="userPasswordValidate()"></td>                <td><span id="passwordValidateReturn" style="color:#EE7621;"></span></td>            </tr>            <tr>                <td align="center" colspan="2">                    <input id="login" value="登陆" type="submit" class="login_btn">                </td>                <td></td>            </tr>        </table>    </form>  </body></html>

智能补全搜索

search.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'search.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">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>    <script type="text/javascript">        function searchList(){            var searchInfo = document.getElementById("searchInfo").value;            $.ajax({                url:"SearchListInfo",                data:"searchInfo=" + searchInfo,                datatype:"text",                success:function (data){                    var searchReturnInfo = data.split(",");                    var searchReturnHtml = "<ul>";                    for(var i = 0; i < searchReturnInfo.length; i ++){                        searchReturnHtml += "<li>" + searchReturnInfo[i] +"</li>";                    }                    searchReturnHtml += "</ul>";                    $("#searchReturn").html(searchReturnHtml);                },                error:function (){                    alert("出错了！");                }            });        }    </script>  </head>  <body>    <input type="text" id="searchInfo" onkeyup="searchList()">     <div id="searchReturn"></div>  </body></html>

SearchListInfo.java

package com.doris.ajax.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class SearchListInfo extends HttpServlet {    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        // TODO Auto-generated method stub        // 获取搜索信息        String searchInfo = req.getParameter("searchInfo");        if(searchInfo != null && searchInfo.length() > 0){            // 中文乱码            searchInfo=new String(searchInfo.getBytes("ISO-8859-1"),"GBK");            System.out.println(searchInfo);            // 设置数据信息            String info = "android,java,sql,ajax,orcl,sdk,http,servlet,spring,struts,struts2," +                    "mvc,javascript,css,html,html5,cocos2dx,unity,ios,c,php,es6";            String[] listInfo = info.split(",");            String temp = "";            for(String item : listInfo){                if(item.contains(searchInfo)){                    temp += "," + item;                }            }            if(temp.length() > 1){                temp=temp.substring(1);            }            // 将服务器的处理信息 输出给客服端            resp.setContentType("text/html;charset=utf-8");            PrintWriter out=resp.getWriter();            out.write(temp);            out.flush();            out.close();        }    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        // TODO Auto-generated method stub        doPost(req, resp);    }}

源码地址：

http://download.csdn.net/detail/qq_23333583/9652725

0 0