JQuery AJAX基本使用

最新推荐文章于 2024-08-09 17:26:52 发布

Switchvov

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量7.1k

点赞数 2

分类专栏： AJAX Javascript 文章标签： jquery ajax

如需转载，请联系本人获取许可且必须注明出处，详见联系方式。

本文链接：https://blog.csdn.net/q547550831/article/details/52904922

版权

Javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

AJAX

3 篇文章 0 订阅

订阅专栏

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()和$ .post()两种方式书写格式一模一样，只需要修改 $.get()为$ .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);
    List<Word> 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);
}