Deng
Deng
jQuery与Ajax入门 | odjBlog
    欢迎来到odjBlog的博客!
> web前端学习 > jQuery与Ajax入门

jQuery与Ajax入门

web前端学习 odjbin 4年前 (2021-09-05) 77次浏览 0个评论

jQuery 介绍与下载安装

  • jQuery 是一个轻量级 JS 库，使用十分简单
  • jQuery 的核心是选择器，用于获取页面元素
  • jQuery 提供了大量高效方法，开发速度大幅提升
  • jquery.com

jQuery 选择器实验室

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 实验室</title>
<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮 css 类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>
</head>
<body>
    <div class="section">
        <h2>jQuery 选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ 邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>
            <span class="myclass ">我是拥有 myclass 类的 span 标签</span>
            <p class="myclass">我是拥有 myclass 的 p 标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">     document.getElementById("btnSelect").onclick=function(){
            var selector=document.getElementById("txtSelector").value;
            //jquery 的选择器方法
            //a 选择器表达式
            $("*").removeClass("highlight");
            $(selector).addClass("highlight");
        }
    </script>
</body>
</html>

基本选择器

  • id 选择器使用"#id 值"进行选择
    css 选择器使用".css 类名"进行选择
    */

  • //将选择高亮
    $("#marital_status").addClass("highlight");
    //与这等价 document.getElementById("btnSelect")

层叠选择器

  • 层叠选择器是根据元素的位置关系来获取元素的选择器表达式

    属性选择器

  • 属性选择器是根据元素的属性值来选择元素的选择器表达式

  • a[href='http://www.baidu.com'] 选择百度

  • a[href^='http://mail'%5D 以 mail 开头

  • a[href*='edu.cn'] 包含 edu.cn 的

位置选择器

  • 位置选择器是指通过位置获取指定的元素，例如“获取第 3 个元素” 0123

    表单选择器

  • 表单选择器是获取表单元素的简化形式，例如:获取所有文本框

    操作元素属性

    sample1.html
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    var href_attr=  $("a[href*='163']").attr("href");
    alert(href_attr);
    $("a[href*='163']").attr("href","http://www.163.com");
    var attr=$("a").attr("href");//返回第一个 href
    alert(attr);//attr 的排除的使用办法
    $("a").removeAttr("href");
</script>

    操作元素的 CSS 样式

  • css()–获取或设置匹配元素的样式属性

  • addClass()-为每个匹配的元素添加指定的类名

  • removeClass()-从所有匹配的元素中删除全部或者指定的类

    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("a").css("color","red");
    $("a").css({"color":"red","font-weight":"bold","font-style":"italic"});
    $("li").addClass("highlight myclass");
    $("p").removeClass("myclass");//移除指定元素的 css 指定类
    var color=$("a").css("color");//获取指定的 css 指定值
    alert(color);
</script>

    设置元素内容

  • val()- 获取或设置输入项的值

  • text()–获取或设置元素的纯文本

  • html()-获取或设置元素内部的 HTML

    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("input[name='uname']").val("administrator");//设置文本框的数据
    var v=$("input[name='uname']").val();//获取前面选择器选中元素的内容
    alert(v);//var 作用在输入项上，用于获取和设置表单输入项的值
    /*
        text 与 html 方法最大的区别在于对于文本中的 html 标签是否进行转义
        在平时开发的时候，如果没有特别必要，优先使用 text 方法设置或获取标签的内容，
        除非是在纯文本中包含了标签，而我们的任务必须加这个标签进行动态的解释执行，此时才会使用 html
        */
    //<span class="myclass ">我是拥有 myclass 类的 span 标签</span> 将中间的内容“我是拥有。。标签”改变
    //$("span.myclass").text("<b>锄禾日当午,汗滴禾下土</b>");//<b>会显示出来
    $("span.myclass").html("<b>锄禾日当午,汗滴禾下土</b>");//加粗
    //获取
    var vspan=$("span.myclass").html();
    alert(vspan);//<b>锄禾日当午,汗滴禾下土</b>
</script>

    jQuery 事件处理方法

  • on(" click" , function)-为选中的页面元素绑定单击事件

  • click(functiQn)-是绑定事件的简写形式

  • 处理方法中提供了 event 参数包含了事件的相关信息

  • 单击，背景变为黄色，用户名输入有空格，背景变为红色

    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("p.myclass").on("click",function(){
        //$(this)是指当前事件产生的对象 myclass 的 p 标签
        $(this).css("background-color","yellow");
    });
    //onclick 的简写形式,可读性和使用更简单
    $("span.myclass").click(function(){
        $(this).css("background-color","lightpink");
    });
    //绑定键盘的单击事件/属性选择器、键盘的完整的按下弹起操作
    $("input[name='uname']").keypress(function(event){
        console.log(event);
        if(event.keyCode==32){
            $(this).css("color","red");
        }
    });
</script>

  • 如果想让文本框失去焦点时进行验证，需要触发哪个 jQuery 事件---------blur

  • 当选择下拉列表的某一项时，可以触发哪个 jQuery 事件——change

Ajax 介绍

  • Asynchronous JavaScript And XML(异步的 JavaScript 和 XML)
  • Ajax 可以在不刷新页面的前提下，进行页面局部更新
  • Ajax 不是新的技术，Ajax 并不是 W3C 的标准

创建 XMLHttpRequest 对象

  • Ajax 的使用流程

    • 创建 XmlHttpRequest 对象

    • 发送 Ajax 请求

    • 处理服务器响应

  • XMLHttpRequest 用于在后台与服务器交换数据，是 AJAX 的核心

  • XMLHttpRequest 并不是 W3C 的标准，不同浏览器的创建方式不同

    发送 Ajax 请求及处理响应

  • xmlhttp.open()用于创建请求

  • xmlhttp.send()用于发送请求

  • xmlhttp.onreadystatechange()事件用于监听 AJAX 的执行过程

  • xmlhttp.readyState 属性说明 XMLHttpRequest 当前状态

  • xmlhttp.status 属性服务器响应状态码，200:成功 404:未找到...

    /**
* Servlet implementation class ContentServlet
*/
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
 * @see HttpServlet#HttpServlet()
 */
public ContentServlet() {
    super();
    // TODO Auto-generated constructor stub
}
/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//对于 ajax 通过前后端通讯的时候，如果前面是 ajax 进行请求发送的话，servlet 中不再进行页面的跳转，而是直接返回我们要产生的信息，或者提供用户的数据就可以了，通常这种数据的格式，我们会采用 json 的形式回传。
    response.getWriter().println("<b style='color:red'>I am sever content</b>");
}
}
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btnload" type="button" value="加载">
<div id="divContent"> </div>
<script>      document.getElementById("btnload").onclick=function(){
        //创建 XmlHttpRequest 对象
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xmlhttp);
        //发送 Ajax 请求
        xmlhttp.open("GET","/ajax/content",true);
        xmlhttp.send();
        //处理服务器响应
        xmlhttp.onreadystatechange=function(){
            //响应已经被接收到、服务器处理成功
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                var t=xmlhttp.responseText;
                alert(t);
                //将内容显示出来
                document.getElementById("divContent").innerHTML=t;
            }
        }
    }
</script>
</body>
</html>

    利用 Ajax 实现新闻列表

public class News {
    private String title;
    private String date;
    private String source;
    private String content;
    public News() {
        super();
    }
    public News(String title, String date, String source, String content) {
        super();
        this.title = title;
        this.date = date;
        this.source = source;
        this.content = content;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    public String getSource() {
        return source;
    }
    public void setSource(String source) {
        this.source = source;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
}
/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        List list = new ArrayList();
        list.add(new News("TUB:2024424 个人股份二个人个人", "2018-5-1", "tube", "..."));
        list.add(new News("TUB:2024425 个人股份二个人个人", "2018-5-1", "tube", "..."));
        list.add(new News("TUB:2024426 个人股份二个人个人", "2018-5-1", "tube", "..."));
        list.add(new News("TUB:2024427 个人股份二个人个人", "2018-5-1", "tube", "..."));
        String json= JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);
    }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        //创建 XmlHttpRequest 对象
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送 Ajax 请求
        xmlhttp.open("GET", "/ajax/news_list", true);
        xmlhttp.send();
        //处理服务器响应
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var text = xmlhttp.responseText;
                console.log(text);
                var json = JSON.parse(text);
                console.log(json);
                var html="";
                for (var i = 0; i < json.length; i++) {
                    var news = json[i];
                    html = html + "<h1>" + news.title + "</h1>";
                    html = html + "<h2>" + news.date + " " + news.source
                            + "</h2>";
                    html = html + "<hr/>"
                }
                document.getElementById("container").innerHTML = html;
            }
        }
    </script>
</body>
</html>

同步与异步的区别

  • 同步：相当于代码进行了一个等待的状态，数据不返回，程序不会向下执行
  • 异步：ajax 是不会处于代码的阻塞状态的，程序依然会向下执行，但是数据返回的时候是触发 xmlhttp.onreadystatechange = function() {}来进行获取处理的。
同步
//发送 Ajax 请求
        //true 代表异步执行  false 代表同步执行
        xmlhttp.open("GET", "/ajax/news_list", false);
        xmlhttp.send();
        console.log("请求发送完成");
        /*同步处理代码
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var text = xmlhttp.responseText;
            console.log(text);
            var json = JSON.parse(text);
            console.log(json);
            var html="";
            for (var i = 0; i < json.length; i++) {
                var news = json[i];
                html = html + "<h1>" + news.title + "</h1>";
                html = html + "<h2>" + news.date + " " + news.source
                        + "</h2>";
                html = html + "<hr/>"
            }
            document.getElementById("container").innerHTML = html;
        }
        */
/////////////////////////////////////////////////////                                            NewsListServlet.java:
protected void doGet(HttpServletRequest request,HttpServletResponse response)
            throws ServletException, IOException {
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

jQuery 对 Ajax 的支持

  • jQuery 对 AJAX 进行封装，提供了$.ajax()方法
  • 语法: $.ajax(options)
  • 使用 jQuery 对 Ajax 进行支持，在进行页面处理时，Servlet 给 Ajax 返回数据的数据格式为 json，需要在（dataType）属性中表现出来。

    Ajax 函数的使用

package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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 com.alibaba.fastjson.JSON;
/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String type=request.getParameter("t");
        List list = new ArrayList();
        if(type!=null&&type.equals("pypl")) {
            list.add(new News("PYPL:2024424 个人股份二个人个人", "2018-5-1", "PYPL", "..."));
            list.add(new News("PYPL:2024425 个人股份二个人个人", "2018-5-1", "PYPL", "..."));
            list.add(new News("PYPL:2024426 个人股份二个人个人", "2018-5-1", "PYPL", "..."));
            list.add(new News("PYPL:2024427 个人股份二个人个人", "2018-5-1", "PYPL", "..."));
        }else if(type==null||type.equals("tiobe")) {
            list.add(new News("TUB:2024424 个人股份二个人个人", "2018-5-1", "tube", "..."));
            list.add(new News("TUB:2024425 个人股份二个人个人", "2018-5-1", "tube", "..."));
            list.add(new News("TUB:2024426 个人股份二个人个人", "2018-5-1", "tube", "..."));
            list.add(new News("TUB:2024427 个人股份二个人个人", "2018-5-1", "tube", "..."));
        }
        String json= JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);
    }
}
jquery_news.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            "url":"/ajax/news_list",
            "type":"get",
            "data":"t=tiobe",//{"t":"pypl","abc":"123,"uu":"777"}
            "dataType":"json",
            "success":function(json){
                console.log(json);
                for(var i=0;i<json.length;i++){
                    $("#container").append("<h1>"+json[i].title+"</h1>");
                }
            },
            "error":function(xmlhttp,errorText){
                console.log(xmlhttp);
                console.log(errorText);
                if(xmlhttp.status=="405"){
                    alert("无效的请求方式");
                }else if(xmlhttp.status=="404"){
                    alert("未找到 URL 资源");
                }else if(xmlhttp.status=="500"){
                    alert("服务器内部错误，请联系管理员");
                }else{
                    alert("产生异常，请联系管理员");
                }
            }
        })
    })
</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

实现二级联动菜单

package com.imooc.ajax;
public class Channel {
    private String code;
    private String name;
    public Channel() {
        super();
    }
    public Channel(String code, String name) {
        super();
        this.code = code;
        this.name = name;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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 com.alibaba.fastjson.JSON;
/**
 * Servlet implementation class ChannelServlet
 */
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChannelServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String level=request.getParameter("level");
        String parent=request.getParameter("parent");
        List chlist=new ArrayList();
        if(level.equals("1")){
            chlist.add(new Channel("ai","前沿/区块链/人工智能"));
            chlist.add(new Channel("web","前端/小程序/JS"));
        }else if(level.equals("2")){
            if(parent.equals("ai")) {
                chlist.add(new Channel("micro","微服务"));
                chlist.add(new Channel("micro","微服务"));
                chlist.add(new Channel("micro","微服务"));
            }else if(parent.equals("web")) {
                chlist.add(new Channel("html","HTML"));
                chlist.add(new Channel("css","CSS"));
                chlist.add(new Channel("other","..."));
            }
        }
        String json= JSON.toJSONString(chlist);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);
    }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            "url" : "/ajax/channel",
            "data" : {"level" : "1"},
            "type" : "get" ,
            "dataType" : "json" ,
            "success" : function(json){
                console.log(json);
                for(var i = 0 ; i < json.length ; i++){
                    var ch = json[i];
                    $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                }
            }
        })
    })
    $(function(){
        $("#lv1").on("change" , function(){
            var parent = $(this).val();
            console.log(parent);
            $.ajax({
                "url" : "/ajax/channel" ,
                "data" : {"level" : "2" , "parent" : parent},
                "dataType" : "json" ,
                "type" : "get" ,
                "success" : function(json){
                    console.log(json);
                    //移除所有 lv2 下的原始 option 选项
                    $("#lv2>option").remove();
                    for(var i = 0 ; i < json.length ; i++){
                        var ch = json[i];
                        $("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
                    }
                }
            })
        })
    })
</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>
http://localhost:8080/ajax/cascade_menu.html
喜欢 (1)赏
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
已稳定运行：3年255天5小时17分