投稿
  1. 云图网首页
  2. 技术专区
  3. 编程笔记

JQuery AJAX基本使用详解编程语言

• 编程笔记 • 阅读 50

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 class="label label-danger">用户名不可用 --> 
    </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'>用户名可用"); 
        } else { 
            response.getWriter().write("<span class='label label-danger'>用户名不可用"); 
        } 
    } 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) + "" 
        + 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); 
}

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/7947.html

赞 (0)
0 0
上一篇 2021年7月18日 19:14
下一篇 2021年7月18日 19:14

相关推荐

发表回复

登录后才能评论