JQuery AJAX基本使用

JQuery AJAX基本使用

参考文档:JQuery在线文档

JQuery Ajax使用的四种基本方式

post方式

格式
$.post(url, [data], [callback], [type])

参数1:url,请求路径
参数2:data,请求参数
参数3:callback,回调函数
参数4:type,返回内容格式,默认的是text,xml, html, script, json, text, _default。

例子

获得 test.php 页面返回的 json 格式的内容

$.post("test.php", { "func": "getNameAndTime" }, function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
}, "json");

get方式

格式
$.get(url, [data], [callback], [type]);

第一个参数:请求的路径 如:

${pageContext.request.contextPath}/Servlet1

第二个参数:请求的参数 格式:

// JSON数据格式
{key1:value1,key2:value2}

第三个参数:回调函数 格式:

function(data){
    alert(data);    
}

第四个参数:返回内容 格式:

xml, html, script, json, text, _default。

服务器响应编码为:application/json;charset=UTF-8,回调函数data类型是json对象

服务器响应编码为:text/html;charset=UTF-8,回调函数data类型是字符串。

$.get() 以get请求方式发送ajax除了请求方式不同,使用方式与$.post()完全一致。

.get() script type="math/tex" id="MathJax-Element-1".get()和/script.post()两种方式书写格式一模一样,只需要修改 .get() script type="math/tex" id="MathJax-Element-2".get()为/script.post(),其余地方不需要改动!

它们的请求方式不同$.get()为get请求,$.post()为post请求。这两种请求方式在处理编码方式上不一样,建议优先使用$.post()请求方式。

例子

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
    alert("Data Loaded: " + data);
});

load方式(少用)

适用于某个HTML元素需要获取服务器发送的响应信息,没有参数的情况下使用get请求,有参数则是POST请求。

格式
load(url, [data], [callback])

url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。
callback:载入成功时回调函数。

例子

加载 feeds.html 文件内容。

// get方式
$("#feeds").load("feeds.html");
// 同上,但是以 POST 形式发送附加参数并在成功时显示信息。
jQuery 代码:
 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

ajax方式

格式
$.ajax(url,[settings])

url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。

例子

检测用户名是否重复

function checkUsername(username) {
    var value = username.value;
    $.ajax({
        type : "POST",  //请求方式
        url : "${pageContext.request.contextPath}/RegisterServlet",  //请求路径
        data : {  //请求参数
            username : value
        },
        success : function(msg) {  //异步请求成功执行的回调函数
            alert("成功了: " + msg);
            $("#usernameinfo").html(msg);
        },//ajax引擎一般用不到;状态信息;抛出的异常信息
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            alert("失败了"+errorThrown)
        }
    });
}

PS:要想回写错误信息,只有$.ajax方式。
PS:具体的Settings,可以查该博文首部的文档。

案例:登录验证

验证HTML
div class="form-group"
    label for="username" class="col-sm-2 control-label"用户名/label
    div class="col-sm-6"
        !-- 绑定一个离焦事件,用于Ajax判定用户名是否合法 --
        input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" onblur="checkUserNameJQuery(this)"
    /div
    div class="col-sm-4" id="userNameInfo"
        !-- span class="label label-success"用户名可用/span 
        span class="label label-danger"用户名不可用/span --
    /div
/div

JQuery使用AJAX实现用户名验证
script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"/script
script type="text/javascript"
    function checkUserNameJQuery(obj) {
        // post请求
        // 参数1:url:发送请求地址
        // 参数2:[data]:待发送 Key/value 参数
        // 参数3:[callback([data])]发送成功时回调函数
        //        [data]回调函数的参数:响应体对象
        // 参数4:type:返回内容格式,xml, html, script, json, text, _default。
        $.post("${pageContext.servletContext.contextPath}/CheckUserNameIsExistServlet", {username: obj.value}, function (data) {
            $("#userNameInfo").html(data);
        });
    }
/script

Servlet方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    // 获取用户名参数
    String username = request.getParameter("username");

    // 查询用户
    try {
        User user = new UserService().getUserByUserName(username);
        if (user == null) {
            response.getWriter().write("span class='label label-success'用户名可用/span");
        } else {
            response.getWriter().write("span class='label label-danger'用户名不可用/span");
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}

PS:dao层和service层不再给出,大致逻辑是service调用dao层的查询方法得到User对象,再返回给Servlet。

AJAX搜索下拉菜单案例

搜索HTML
div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="float: right;"
    form class="navbar-form navbar-right" role="search"
        div class="form-group"
            input type="text" class="form-control" placeholder="Search" id="searchText"
        /div
        button type="submit" class="btn btn-default"Submit/button
    /form
    !-- 显示查询信息的div --
    div id="completeShow" style="display: none;"
        ul id='itemul' class='list-group'
            !-- li class='list-group-item'a href='#'查询结果1/a/li
            li class='list-group-item'a href='#'查询结果2/a/li
            li class='list-group-item'a href='#'查询结果3/a/li
            li class='list-group-item'a href='#'查询结果4/a/li
            li class='list-group-item'a href='#'查询结果5/a/li --
        /ul
    /div
/div

Javascript函数

高亮函数
// 将关键字高亮
function replaceKeyWord(text, key) {
    // 关键字出现的索引
    var index = 0;
    // 存放关键字出现的索引
    var arr = new Array();
    var i = 0;
    // 获取关键字开始出现的索引
    while((index = text.indexOf(key, index)) = 0) {
        arr[i++] = index;
        index++;
    }
    // 关键字的长度
    var keyLen = key.length;
    // 从后往前修改文本
    for (var j = arr.length - 1; j = 0; j--) {
        text = text.substring(0, arr[j]) + "span style='background-color: yellow;'" 
        + text.substr(arr[j], keyLen) + "/span"
        + text.substring(arr[j] + keyLen, text.length);
    }
    // 测试
    // alert(text);
    return text;
}
搜索函数
// Ajax搜索
$(function() {
    $("#searchText").keyup(function() {
        // 搜索框绑定一个键盘弹起事件
        // alert("msg");
        // 清空子元素
        $("#itemul").empty();
        // 不等于空才发送请求
        if($(this).val() != "") {
            $.post("${pageContext.servletContext.contextPath}/SearchTextServlet", {"text": this.value}, function(data) {
                // 测试数据是否已获取
                // alert(data);
                // 获取到数据
                if($(data).size()  0) {
                    // 显示下拉菜单
                    $("#completeShow").slideDown(200);
                    $.each(data, function() {
                        $("#itemul").append("li class='list-group-item'a href='#'"+ replaceKeyWord(this.word + this.pinyin, $("#searchText").val()) +"/a/li");
                    });
                } else {
                    // 隐藏下拉菜单
                    $("#completeShow").slideUp(200);
                }
            }, "json");
        } else {
            // 隐藏下拉菜单
            $("#completeShow").slideUp(200);
        }
    }).focus(function() {
        // 聚焦事件,显示下拉菜单
        // 下拉菜单有元素则显示
        if($("#itemul li").size()  0) {
            // 显示下拉菜单
            $("#completeShow").slideDown(200);
        }
    }).click(function() {
        // 禁用隐藏下拉菜单事件
        return false;
    });

    // 点击其他区域隐藏下拉菜单
    $(document).click(function() {
        $("#completeShow").slideUp(200);
    });

});

SearchTextServlet
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    // 获取表单信息
    String text = request.getParameter("text");
    // System.out.println(text);
    ListWord words = new ArrayList();
    try {
        if (text != null  !"".equals(text)  !text.matches("[_%]")) {
            // 在数据库中搜索,只返回前五条记录
            words = new WordService().searchText(text.trim());
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    // 转换成JSON数组对象
    JSONArray jsonWords = JSONArray.fromObject(words);
    response.getWriter().write(jsonWords.toString());
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}

PS:dao层和service层不再给出,大致逻辑是service调用dao层的查询方法得到Word对象集合,再返回给Servlet。

最新回复(0)
/jishuRB5RwBct8aUuMrzpf6MJUezO2tqnTZtAbT_2FvLtwTDfE_3D
8