AJAX基本演示使用

最新推荐文章于 2023-11-21 13:31:26 发布

weixin_30549657

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量94

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/sherrykid/p/4574076.html

版权

Servlet配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">


    <servlet>
        <servlet-name>AjaxServer</servlet-name>
        <servlet-class>org.zln.ajax.servlet.AjaxServer</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServer</servlet-name>
        <url-pattern>/AjaxServletDo.do</url-pattern>
    </servlet-mapping>
</web-app>

Servlet编写

package org.zln.ajax.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
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 coolkid on 2015/6/7 0007.
 */
public class AjaxServer extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try{
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            //取参数信息
            String name = request.getParameter("name");
            //输入校验
            if(name == null || name.length() == 0){
                out.println("用户名不能为空");
            } else{
                //逻辑校验与业务处理
                if(name.equals("wangxingkui")){
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名");
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");
                }
            }
            /*这些发往HTML的数据会被ajax的回调函数处理*/
            out.println("<br/><a href=\"ajax.html\">返回校验页面</a>");
        } catch(Exception e){
            e.printStackTrace();
        }
        //返回更新数据（而不是跳转到新的视图）
    }
}

html页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>itcast.cn 用户名校验ajax实例</title>
    <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script>
</head>
<body>
    itcast.cn 用户名校验的ajax实例，请输入用户名：<br/>
    <!-- ajax方式下，不需要使用表单提交数据 -->
    <input type="text" id="userName" value=""/>
    <input type="button" value="校验" onclick="verify('userName')"/><br/>
    <!-- div空间用于显示ajax处理结果  -->
    <div id="result"></div>
</body>
</html>

/**
 * Created by coolkid on 2015/6/7 0007.
 */
/*用户名校验*/
function verify(id){
    //获取文本框内容
    var userNameObj = $("#"+id);
    var userNameValue = userNameObj.val();
    //发送数据给Servlet
    //使用jQuery的XMLHTTPRequest对象的get请求封装
    $.get("/Ajax/AjaxServletDo.do?name="+userNameValue,null,callBack);

}

//回调函数
function callBack(data){
    //接收服务端返回数据
    $("#result").html(data);
    //显示动态返回的数据
}

js的简化写法

/**
 * Created by coolkid on 2015/6/7 0007.
 */
/*用户名校验*/
function verify(id){
    //发送数据给Servlet
    //使用jQuery的XMLHTTPRequest对象的get请求封装
    $.get("/Lesson5_AJAX_Demo1/AjaxServletDo.do?name="+$("#"+id).val(),null,function(data){
        $("#result").html(data);
    });

}

转载于:https://www.cnblogs.com/sherrykid/p/4574076.html

weixin_30549657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX基本演示使用

Servlet配置<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLo...
复制链接

扫一扫