转：一个传智播客的JQuery例子

最新推荐文章于 2020-10-18 16:19:43 发布

iteye_7824

最新推荐文章于 2020-10-18 16:19:43 发布

阅读量214

点赞数

分类专栏： JQuery 文章标签： jQuery Ajax Servlet HTML 浏览器 ViewUI

本文链接：https://blog.csdn.net/iteye_7824/article/details/81822904

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

传统的和Ajax的区别，Ajax使用JQuery库（框架）
看视频，忍不住保存下来了。

[b]web.xml[/b]


<?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>ClassicServer</servlet-name>
        <servlet-class>ClassicServer</servlet-class>
    </servlet>
    <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>
    <servlet-mapping>
        <servlet-name>ClassicServer</servlet-name>
        <url-pattern>/ClassicServer</url-pattern>
    </servlet-mapping>
</web-app>

[b]Servlet类AJAXServer[/b]


import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by IntelliJ IDEA.
 * User: xw
 * Date: 2010-2-2
 * Time: 20:32:53
 * To change this template use File | Settings | File Templates.
 */
public class AJAXServer extends HttpServlet{
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doPost(httpServletRequest, httpServletResponse);

    }

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();
            //1，取参数
            String old = httpServletRequest.getParameter("name");
            //2，检查参数是否有问题
            if (old==null || old.length()==0){
                out.println("用户名不能为空");
            } else{
                String name = old;
                //3，校验操作
                if ("nick".equals(name)){
                    //4，输出回去的是数据，不是页面。
                    out.println("用户名["+name+"]已经存在。");
                }else{
                    out.println("用户名["+name+"]尚未存在。");
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        } 
    }
}

[b]ajax.html[/b]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>ajax用户校验实例</title>
  <script type="text/javascript" src="jslib/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
    用户校验ajax的实例,请输入用户名：<br/>
    <input type="text" id="userName" />
    <input type="button" value="校验" onclick="verify();"/>
    <div id="result"></div>                   
</body>
</html>

[b]新手的verify.js[/b]


//定义用户校验的方法
function verify(){
    //alert("A");
    //1，获取文本框的内容
    var jqueryObj = $("#userName");
    //获取节点的值
    var userName = jqueryObj.val();
    //alert(userName);
    //2，将文本框中的数据发送给服务器的Servlet
    //get有三个参数 参看JQuery API
    //http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html
    $.get("AJAXServer?name="+userName,null,callBack);
}

//回调函数
function callBack(data){
    //alert("服务器端的数据回来了！");
    //3，接收服务器端返回的数据
    //alert(data);

    //4，将服务端返回的数据动态显示到页面
    //找到结果信息的节点
    var resultObj = $("#result");
    resultObj.html(data);

}

[b]熟悉了，直接这样写了verify1.js[/b]


function verify(){
    var userName = $('#userName').val();
    alert(userName);
    $.get("AJAXServer?name="+ userName, null, function (data){
        $("#result").html(data);
    });
}

iteye_7824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转：一个传智播客的JQuery例子

传统的和Ajax的区别，Ajax使用JQuery库（框架）看视频，忍不住保存下来了。[b]web.xml[/b][code="xml"] ClassicServer ClassicServer AJAXServer AJAXServer ...
复制链接

扫一扫