Day03jquery框架对于ajax的封装

最新推荐文章于 2024-04-02 13:55:25 发布

ZZZ___bj

最新推荐文章于 2024-04-02 13:55:25 发布

阅读量519

点赞数

分类专栏： ajax javaweb 文章标签： ajax jquery 异步

本文链接：https://blog.csdn.net/ZZZ___bj/article/details/78949064

版权

javaweb 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

jquery框架对于ajax的封装

jquery封装ajax加载机制

$.ajax({

});

$.ajax({
        type:get|post,  // 异步请求的提交方式,若不写，默认get方式,相当于method
        url:"/ajax/check",   //提交的路径，如：/ajax/check 若是get则后直接跟参数/ajax/check?name=123&password=123
        data:"name=123&password=123",  //若是post，则在data后传，data等效于xhr.send
        success：function(result){//响应处理
            result等效于 xhr.responseText
            result为形参，随意写值
        }
});

实例代码

注册信息使用juery对于ajax的封装

//首先需要引入jquery-1.8.3.js插件,放在WebContent下面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //当name丢失焦点时调用此函数
            $("#name").blur(function(){

                //1.获得文本框中的内容
                var name = $(this).val();

                //2.发送ajax异步请求$.ajax();
                $.ajax({
                    type:"post",
                    url:"CheckName",
                    data:"name="+name,
                    success:function(result){
                        $("#msg").text(result);
                    }
                });
            });
        });
</script>

<title>注册</title>
</head>
<body>
    <table>
        <tr>
            <td>UserName</td>
            <td><input type="text" name="name" id="name"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserPassword</td>
            <td><input type="text" name="password" id="password"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td>UserEmail</td>
            <td><input type="text" name="email" id="email"/><span id="msg"></span></td>
        </tr>
        <tr>
            <td><input type="button" value="注册"/></td>
        </tr>
    </table>
</body>
</html>

//CheckNameServlet请见Day01get中

load:加载局部页面

网站，首页，大页面会切分为多个页面
先加载出来main页面，main中部分内容会经过ajax继续加载，防止网页卡顿，main页面加载慢的问题。

$("#B").load("Bload-query2.jsp"); //load 页面的局部加载

此处使用的jsp，以后则路径为servlet或controller路径，由此返回jsp页面

实例代码

先加载Aload-query1.jsp页面，后使用ajax方法加载其余内容Bload-query2.jsp

Aload-query1.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            window.setTimeout(function(){//模拟网络卡顿，加载速度慢的效果
                $("#B").load("Bload-query2.jsp"); //load 页面的局部加载
            },5000);
        });
</script>

<title>load</title>
</head>
<body>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    AAAAAAAA
    <br>
    <div id="B">
        loadding……………………
    </div>
</body>
</html>

Bload-query2.jsp

BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>
BBBBBBBB<br>

ZZZ___bj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Day03jquery框架对于ajax的封装

$.ajax({ method:get|post, // 异步请求的提交方式,若不写，默认get方式 url:"/ajax/check", //提交的路径，如：/ajax/check 若是get则后直接跟参数/ajax/check?name=123&password=123 data:"name=123&password=123", //若是p
复制链接

扫一扫

专栏目录