十五、jQuery & AJAX（2）

最新推荐文章于 2024-07-15 22:52:27 发布
最新推荐文章于 2024-07-15 22:52:27 发布
阅读量213 收藏
点赞数
分类专栏： # JAVAEE 文章标签： javascript jquery ajax json java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u_hcy2000/article/details/109387907
版权

文章目录

1 jQuery框架的ajax(掌握)

1.1 jQuery框架的ajax简介

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：

请求方式语法
GET请求$.get(url, [data], [callback], [type])
POST请求$.post(url, [data], [callback], [type])
AJAX请求$.ajax([settings])

关系：get和post都是在ajax的基础上进行的封装

1.2 GET请求方式

概述

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.get(url, [data], [callback], [type])

其中，参数说明如下：

参数名称解释
url请求的服务器端url地址
data发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
callback当请求成功后的回掉函数，可以在函数体中编写客户端处理的逻辑代码
type预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

实例：
第一种方式（get函数,带方法签名）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery的AJAX</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js">

    </script>

    <script type="text/javascript">
        /**
         * jQuery的封装好的ajax,实现异步请求
         * get请求
         * ajax的函数 get
         *
         * get函数,带方法签名
         * 方法签名:值
         */
        function getFn() {
            $.get({
                //参数: 请求服务器的地址
                url:"/ajax",
                //提交到服务器的参数,HTTP协议内容
                data:"name=lisi&age=30",
                //服务器响应成功后,需要调用函数进行处理
                //匿名函数中,传递参数,该参数就是服务器响应回来的数据
                success:function(data){
                    console.log("服务器响应::"+data);
                },
                //服务器响应回来的数据类型
                dataType:"text"
            });
        }
    </script>
</head>
<body>

   <input type="button" value="get请求" onclick="getFn()">
</body>
</html>

第二种方式（get函数,不带方法签名）：

<script type="text/javascript">
    /**
     * jQuery的封装好的ajax,实现异步请求
     * get请求
     * ajax的函数 get
     *
     * get函数,不带方法签名
     *
     * 不写方法签名可以,好处是减少代码量
     * 参数的顺序不能错
     * url,data,响应成功的函数,返回的数据类型
     */
    function getFn() {
        $.get(
            //参数: 请求服务器的地址
            "/ajax",
            //提交服务器参数
            "name=lisi&age=30",
            //响应成功后的回调函数
            function(data){
                console.log("服务器::"+data);
            },
            //服务器响应成功的数据类型
            "text"
        );

        /**
         *   //参数: 请求服务器的地址
         url:"/ajax",
         //提交到服务器的参数,HTTP协议内容
         data:"name=lisi&age=30",
         //服务器响应成功后,需要调用函数进行处理
         //匿名函数中,传递参数,该参数就是服务器响应回来的数据
         success:function(data){
                console.log("服务器响应::"+data);
            },
         //服务器响应回来的数据类型
         dataType:"text"
         */
    }
</script>

1.3 POST请求方式

概述

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.post(url, [data], [callback], [type])

其中，参数说明如下：

参数名称解释
url请求的服务器端url地址
data发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
callback当请求成功后的回掉函数，可以在函数体中编写客户端处理的逻辑代码
type预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

实例：
第一种方式（post函数,带方法签名）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery的AJAX_post</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js">

    </script>

    <script type="text/javascript">
        /**
         * jQuery的封装好的ajax,实现异步请求
         * post请求
         * ajax的函数post
         *
         * post函数,带方法签名
         * 方法签名:值
         */
        function postFn() {
            $.post({
                //参数: 请求服务器的地址
                url:"/ajax",
                //提交到服务器的参数,HTTP协议内容
                data:"name=lisi&age=30",
                //服务器响应成功后,需要调用函数进行处理
                //匿名函数中,传递参数,该参数就是服务器响应回来的数据
                success:function(data){
                    console.log("服务器响应::"+data);
                },
                //服务器响应回来的数据类型
                dataType:"text"
            });
        }
    </script>
</head>
<body>

   <input type="button" value="post请求" onclick="postFn()">
</body>
</html

第二种方式（ post函数,不带方法签名）:

<script type="text/javascript">
    /**
     * jQuery的封装好的ajax,实现异步请求
     * post请求
     * ajax的函数post
     *
     * post函数,不带方法签名
     * 方法签名:值
     */
    function postFn() {
        $.post(
            //参数: 请求服务器的地址
            "/ajax",
            //提交到服务器的参数,HTTP协议内容
            "name=lisi&age=30",
            //服务器响应成功后,需要调用函数进行处理
            //匿名函数中,传递参数,该参数就是服务器响应回来的数据
            function(data){
                console.log("服务器响应::"+data);
            },
            //服务器响应回来的数据类型
            "text"
        );
    }
</script>

1.4 AJAX请求方式

概述

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

语法

jQuery.ajax([settings])

其中，settings是一个js字面量形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：

属性名称解释
url请求的服务器端url地址
async(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”
dataType预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success请求成功后的回调函数
error请求失败时调用此函数
代码
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery的AJAX函数</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js">

    </script>

    <script type="text/javascript">
            /**
             * jQuery的ajax请求的函数
             * 函数名字就是ajax
             *
             * ajax函数是get,post的底层实现
             * get,post是ajax的上层函数,高层函数
             *
             * get,post本质就是调用ajax
             *
             * 高层: 代码少,使用简单,推荐
             * 底层: 代码多,灵活性更强,不推荐
             *
             * 方法签名:
             *   async : 写布尔值, true(默认)异步请求,  false 同步请求
             *   success: 服务器响应成功后调用
             *   error:服务器响应失败后调用
             *   type:请求方式: get,post  默认是get
             */
            function ajaxFn() {
                $.ajax({
                    url:"/ajax",
                    data:"name=zhangsan&age=20",
                    success:function(data){
                        console.log(data)
                    },
                    error:function(data){
                        console.log("服务器响应失败");
                    },
                    dataType:"text",
                    type:"POST"
                });
        }
    </script>
</head>
<body>
<input type="button" value="ajax请求" onclick="ajaxFn()">
</body>
</html>

2 json数据格式

2.1 json概述

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

定义一个学生:
xml

<students>
    <student>
        <name>张三</name>
        <age>18</age>
    </student>
    <student>
        <name>李四</name>
        <age>14</age>
    </student>
    <student>
        <name>王五</name>
        <age>15</age>
    </student>
</students>

json

[
	{"name":"张三", "age":18},
	{"name":"李四", "age":14},
	{"name":"王五", "age":15}
]

{"boys" : [
	{"name":"张三", "age":18},
	{"name":"李四", "age":14},
	{"name":"王五", "age":15}
]}

异步请求,服务器响应的数据是JSON：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>异步请求,服务器响应的数据是JSON</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        function jsonFn() {
            /**
             * 服务器发生AJAX异步请求
             * 响应回来的数据是json
             */
            $.get(
                "/ajaxJson",
                "name=zhangsan",
                function(data){
                    console.log(data)
                },
                "json"
            );
        }
    </script>
</head>
<body>
   <input type="button" value="请求" onclick="jsonFn()">
</body>
</html>

2.2 json的语法格式

json对象有两种数据格式，分别如下：

类型语法解释
对象类型 {键值对}{name:value,name:value…}其中name是字符串类型，而value是任意类型
数组类型 [元素][value,value,value…]其中value是任意类型

两种数据类型混合： [{},{}… …] 或 {name:[]… …} （常见）

*  json允许两张格式相互嵌套
*     [ "键1" :值, "键2":值 ] 数组,数组的元素是对象
*
*     { "键1":[1,2,3] } 对象,对象的键是字符串,值是数组
*
*     {"键1": [  "键":值 ]}

2.3 json格式与json解析

案例一：json格式,模拟Java中的对象

<script type="text/javascript">
	/**
	* 案例一
	*  {key:value,key:value}
	*  
	* class Person{
	* 	  String firstname = "张";
	*    String lastname = "三丰";
	*    Integer age = 100;
	* }
	* 
	* Person p = new Person();
	* System.out.println(p.firstname);
	*/
	//json格式,模拟Java中的对象
  var json ={"firstname":"张","lastname":"三丰","age":100};
  //输出三丰
  console.log( json.lastname );

</script>

案例二：数组中存放对象

<script type="text/javascript">
	/**
	* 案例二
	*  [{key:value,key:value},{key:value,key:value}]
	*
	*  json的数据,本身数组
	*  数组有2个元素
	*  每个元素都是对象
	*  每个对象还有2个键值对
	*/
	var json = [
	   {"firstname":"张","lastname":"三丰"},
	   {"firstname":"赵","lastname":"敏"}
	];
	//输出赵
	console.log( json[1].firstname );
	for(var i=0;i<json.length;i++){
	   console.log( json[i].firstname+"=="+json[i].lastname );
	}

</script>

案例三：对象有一个键，键对应的值是数组

<script type="text/javascript">

	/**
	* 案例三
	* {
	*   "param":[{key:value,key:value},{key:value,key:value}]
	* }
	*
	* json数据是对象,键param
	* 对象的值,是数组
	* 数组2个元素,每个元素是对象
	*/
	var json = {
	 "param":[
	     {"firstname":"张","lastname":"三丰"},
	     {"firstname":"赵","lastname":"敏"}
	 ]
	};
	
	//取出赵
	console.log( json.param[1].firstname );

</script>

案例四：对象有多个键，每个键对应数组

<script  type="text/javascript">
	/**
	* 案例四
	* {
	*   "param1":[{key:value,key:value},{key:value,key:value}],
	*   "param2":[{key:value,key:value},{key:value,key:value}],
	*   "param3":[{key:value,key:value},{key:value,key:value}]
	* }
	*  
	*  json数据是对象
	*  对象有3个键
	*  每个键对应的值,是数组
	*  数组2个元素,每个元素是对象
	*/
	var json = {
	   "param1":[
	       {"firstname":"张","lastname":"三丰"},
	       {"firstname":"赵","lastname":"敏"}
	   ],
	   "param2":[
	       {"firstname":"张","lastname":"无忌"},
	       {"firstname":"谢","lastname":"逊"}
	   ],
	   "param3":[
	       {"firstname":"肖","lastname":"峰"},
	       {"firstname":"韦","lastname":"小宝"}
	   ]
	};
	//取出谢逊
	console.log(json.param2[1].firstname+"::"+json.param2[1].lastname);
	
	//取出韦小宝
	console.log(json.param3[1].firstname+"::"+json.param3[1].lastname);
</script>

3 json的转换工具

3.1 json转换工具的概述

json的转换工具是通过java封装好的一些jar工具包，直接将java对象或集合转换成json格式的字符串。

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

3.2 常见的json转换工具

工具名称介绍
JsonlibJava 类库，需要导入的jar包较多
Gsongoogle提供的一个简单的json转换工具
Fastjsonalibaba技术团队提供的一个高性能的json转换工具
Jackson开源免费的json转换工具，springmvc转换默认使用jackson

3.3 Jackson开发步骤

  1. 导入jar包
  2. 创建Jackson转换工具对象 ObjectMapper
  3. 调用方法, 完成 json 与java对象 相互转换

3.4 API简述

ObjectMapper类, 是Jackson库的主要类, 它提供一些功能将Java对象转换成JSON结构，反之亦然

TypeReference 类, 对进行泛型的反序列化，使用TypeReference可以明确的指定反序列化的类型

  • API : 类ObjectMapper
方法描述
public String writeValueAsString(Object value)将java对象 转换成 json字符串
public T readValue(String content, Class valueType)将json字符串 转换成 Java对象
public T readValue(String content, TypeReference valueTypeRef)将json字符串 转换成 Java对象

3.5 json字符串与java对象相互转换

@WebServlet(urlPatterns = "/jackson")
public class JackSonServlet extends HttpServlet {

    private ObjectMapper mapper = new ObjectMapper();

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

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /**
         * 转换工具 jackson,Java对象和json字符串的转换
         */
        test6();
    }
    /**
     * json数据转成Map集合
     */
    public void test6() throws IOException {
        String json = "{\"s3\":{\"name\":\"赵丽颖3\",\"age\":353},\"s1\":{\"name\":\"赵丽颖1\",\"age\":351},\"s2\":{\"name\":\"赵丽颖2\",\"age\":352}}";
        HashMap<String,Student> map = mapper.readValue(json,new TypeReference<HashMap<String,Student>>(){});
        System.out.println(map);
    }

    /**
     * json数据转成对象List集合
     */
    public void test5() throws IOException {
        String json = "[{\"name\":\"赵丽颖1\",\"age\":351},{\"name\":\"赵丽颖2\",\"age\":352},{\"name\":\"赵丽颖3\",\"age\":353}]";
        //TypeReference 带泛型
        List<Student> list =  mapper.readValue(json,new TypeReference<List<Student>>(){});
        for(Student s: list){
            System.out.println(s);
        }
    }

    /**
     * json数据转成对象 pojo
     */
    public void test4() throws IOException {
        String json = "{\"name\":\"赵丽颖\",\"age\":35}";
        //mapper对象的方法readValue() json数据转回对象
       Student student =  mapper.readValue(json,Student.class);
        System.out.println(student);
    }

    /**
     * Map集合转成json
     */
    public void test3() throws JsonProcessingException {
        Student s1 = new Student("赵丽颖1",351);
        Student s2 = new Student("赵丽颖2",352);
        Student s3 = new Student("赵丽颖3",353);

        Map<String,Student> map = new HashMap<String, Student>();
        map.put("s1",s1);
        map.put("s2",s2);
        map.put("s3",s3);

        String json = mapper.writeValueAsString(map);
        System.out.println(json);
    }

    /**
     *  list集合转成json
     */
    public void test2() throws JsonProcessingException {
        Student s1 = new Student("赵丽颖1",351);
        Student s2 = new Student("赵丽颖2",352);
        Student s3 = new Student("赵丽颖3",353);

        List<Student> list = new ArrayList<Student>();
        list.add(s1);
        list.add(s2);
        list.add(s3);

        String json =  mapper.writeValueAsString(list);
        System.out.println(json);
    }

    /*
    *   pojo对象转成json
    * */
    public void test1() throws JsonProcessingException {
        Student s = new Student("赵丽颖",35);
        //ObjectMapper()对象方法 writeValueAsString()对象转成json
        String json = mapper.writeValueAsString(s);
        System.out.println(json);
    }

}

4 综合案例(使用JQuery下的ajax)

4.1 检测用户名是否已经被注册

在这里插入图片描述
分析：
在这里插入图片描述
Servlet：

@WebServlet(urlPatterns = "/checkUserName")
public class CheckUserNameServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接受请求的参数,用户名
        String username = request.getParameter("username");
       //调用业务层,传递用户名,查询结果集,User对象
        UserService service = new UserService();
        User user = service.queryUserByName(username);
        //判断user对象的结果
        if(user == null){
            //没有查询到用户数据,响应true
            response.getWriter().write("true");
        }else {
            //查询到用户数据,响应false
            response.getWriter().write("false");
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function checkUserName() {
            /**
             * 获取用户名文本框的值
             * 异步请求,提交到服务器
             * 获取服务器的响应
             * 判断响应的结果,进行提示
             */
           var username =  $("#username").val();
           //判断用户名是否填写
            if(username.trim() == ""){
                //没有填写,不需要发生请求,提示必须填写用户名
                $("#usernameMsg").html("请输入用户名").css("color","red");
                return;
            }

            //发请求,提交用户名
            $.get(
                "/checkUserName",
                "username="+username,
                function(data){
                   //判断服务器响应回来数据
                    if(data =="true"){
                        //可以使用,span标签上提示
                        $("#usernameMsg").html("恭喜!用户名可以使用").css("color","green");
                    }else{
                        //不能使用
                        $("#usernameMsg").html("抱歉!用户名被占用,尝试"+username+"_123").css("color","red");
                    }
                },
                "text"
            );
        }
    </script>
</head>
<body>
<form action="01.html" method="get">
    <table border="1" width="500" align="center" >
        <tr>
            <td>用户名</td>
            <!--注册事件,失去焦点-->
            <td><input type="text" name="username" id="username" onblur="checkUserName()"/></td>
            <td><span id="usernameMsg"></span></td>
        </tr>
    </table>
</form>
</body>
</html>

4.2 内容自动补全

在输入框输入关键字，下拉框中异步显示与该关键字相关的名称
在这里插入图片描述
sql语句方面用模糊查询
Servlet：

@WebServlet(urlPatterns = "/search")
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String keyWord = request.getParameter("keyWord");
        UserService service = new UserService();
        List<User> userList = service.search(keyWord);
        //集合转成json响应
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(userList);
        System.out.println(json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(json);
    }
}

html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
           /* height: 100px;*/
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        function searchWord() {

            var show = $("#show");

            //获取文本框的值
            var keyWord = $("#keyWord").val();
            if(keyWord.trim()==""){
                //div隐藏
                show.hide();
                //文本框什么也没写
                return;
            }

            //发生请求,提交关键词
            $.get(
                "/search",
                "keyWord="+keyWord,
                function (data) {
                    //显示div
                    show.show();//jQuery函数,标签显示
                    var str="";
                    //data响应的是服务器json数据  本质是数组,数组中的元素是对象,对象的键name
                    //data中存放的json数据，json第二种类型数组的形式，jquery的each遍历data数组
                    $.each(data,function(index,element){
                        //element.name用户名,填充div
                        //拼接字符串  拼接div标签
                        //div标签添加鼠标悬停事件 传递this,传递当前标签对象
                        str += "<div  οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+ element.name +"</div>";
                    });
                    //字符串,填充div
                        show.html(str);
                },
                "json"
            );

        }

        //鼠标悬停事件
        function overFn(obj) {
            //div改变背景色
            $(obj).css("background-color","yellow");
        }

        //鼠标离开事件
        function outFn(obj) {
            $(obj).css("background-color","");
        }
    </script>
</head>
<body>
<div class="content">
    <img alt="" src="img/logo.png"><br/><br/>
    <!--搜索框,绑定键盘弹起事件-->
    <input id="keyWord" type="text" name="word" onkeyup="searchWord()">
    <input type="button" value="搜索一下">
    <!--查询后,补全的数据,填充div中-->
    <div id="show" class="show"></div>
</div>
</body>
</html>
u_hcy2000
关注
专栏目录
JQuery发送AJAX请求
gcsyzy的博客
04-01 1604
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jQuery实现AJAX和AJAX跨域问题
qq_37035987的博客
07-02 3481
1、跨域是指从一个域名的网页去请求另一个域名的资源，AJAX存在跨域问题，比如下面从服务器a发送AJAX请求到服务器b。2、同源策略是指一段脚本只能读取来自同一来源的资源，同源就是协议、域名、端口都相同。后台响应需要获取AJAX请求时穿过来的函数名，默认为callback，可以通过。3、在被访问中设置响应头来解决AJAX跨域问题。dataType : "jsonp"(这里一定要写jsop)4、用jsopn解决AJAX跨域问题。二、用AJAX实现一个省市联动动态展示功能。一、AJAX跨域问题。
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 3041
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery（五）Ajax、跨域
商务合作 | 共同学习 | 携手共进
10-09 4万+
JavaScript jQuery：Ajax、跨域。
用jQuery实现Ajax
m0_53698336的博客
11-01 6747
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
jQuery封装ajax
古城的博客
10-15 2423
jQuery实现对ajax的封装，使代码轻量化 AJAX—$.get() $.get()是一个简单的 GET 请求功能。请求成功时可调用回调函数。 $.get(url,[data],[callback],[type]) url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml, html, script, json, text, _default 注意：请求是通过 URL 提交的 提交有大小限制（2KB） AJAX— $.p
jQuery-Ajax 详解
m0_48982503的博客
12-14 1万+
一、什么是Ajax Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。 二，jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 ...
浅谈使用Jquery实现ajax请求
三冬暖
05-17 3132
使用jQuery实现ajax请求 一、以前Ajax请求 Ajax请求的实现分为五个步骤： 创建请求对象 设置与服务器端的连接信息 向服务器发送数据 设置回调函数 接收服务器的响应数据 每次都写这五个步骤显得比较麻烦，所以使用jQuery的方法实现则较为简洁。 二、使用jQuery实现 语法 $.ajax([settings]) settings为配置ajax请求的一系列键值对，具体参数说明如下表（参数来源菜鸟教程） 名称 值/描述 async 布尔值，表示请求是否异步处理。默
【精简版】jQuery 中的 Ajax 详解
最新发布
weixin_46485638的博客
07-15 5534
精简的 jQuery 中的 Ajax 详解。
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
CommandLine:使用 jQuery&PHP&Ajax
06-07
使用 jQuery&PHP&Ajax。 Javascript 和 PHP 终端。 请编辑 api.php 第 22~45 行。 case 'help' : $ array [ 'output' ] = msg ( 'HELP MESSAGE: commandname --command description. commandname2 --command ...
1.Javascript & jQuery & Ajax & JSON
01-04
JavaScript、jQuery、Ajax和JSON是Web开发中的四个关键概念，它们在构建动态、交互式的网页应用中发挥着重要作用。下面将分别对这四个主题进行详细阐述。 **JavaScript** 是一种轻量级的脚本语言，主要用于客户端的...
JavaScript&jQuery应用&ajax
04-16
2. jQuery入门：选择器、DOM操作、事件处理、动画和Ajax。 3. AJAX工作原理：创建XMLHttpRequest对象、发送GET和POST请求、处理响应。 4. 示例和实战项目：结合实际案例讲解如何在网页中应用JavaScript、jQuery和...
jQuery的ajax下载blob文件
10-21
2. 通过查阅jQuery文档，尝试使用jQuery.ajaxSetup()来扩展数据类型处理。但这种方式通常比较复杂，并且可能不是那么容易就能实现的，需要对jQuery内部机制有一定的了解。 3. 使用社区中已经封装好的jQuery插件。在...
十一、JavaWeb之用户角色权限设置（1）
u_hcy2000的博客
10-17 2602
文章目录一、需求分析二、环境搭建2.1 数据库环境2.2 java环境：2.3 配置数据库连接池 一、需求分析 主要有三大模块,分别是权限 , 角色, 用户 。 主要针对这三部分数据进行增删改等操作。 权限模块 展示权限列表，添加权限，修改相关权限，删除权限 Tips：修改、添加、删除都依赖于查询操作（因为你添加完了，改完了，肯定要再次展示给用户看改完了的数据，这时候需要再次查询，因此查询是基本操作，先实现） 二、环境搭建 2.1 数据库环境 创建数据库、创建数据库表 创建 权限表 t_permi
十八、Maven使用（2）
u_hcy2000的博客
11-08 767
文章目录第一章 继承1 需求2 父pom文件3 子pom文件（以dao层举例）第二章 聚合工程1 创建父工程1.1 删除src目录1.2 修改pom.xml管理版本2 子模块（dao、service、web）2.1 dao层（不用骨架）2.2 service层（不用骨架）2.3 web层（使用骨架）3 注意事项第三章 Maven常用命令1 clean命令2 compile命令3 test命令4 package命令5 install命令第四章 面向接口编程 第一章 继承 1 需求 ​ a项目 需要mysql
一、MySQL数据库（单表）（2）
u_hcy2000的博客
09-22 651
文章目录1 SQL语句（DQL）1.1 简单查询1.2 条件查询1.3 排序查询1.4 聚合查询1.5 分组查询1.6 条数限制查询 1 SQL语句（DQL） 数据准备： /* 产品表,商品表 product pid 主键 pname 商品名字 price 价格 category_id 分类 c001 家电 c002 服装 c003 化妆品 c004 食品 c005 饮料 */ CREATE TABLE product( pid INT
三十一、RabbitMQ一（1）
u_hcy2000的博客
02-04 578
文章目录学习目标一、消息队列MQ概述1.1 为什么使用MQ1.2. 消息队列产品1.3. AMQP 和 JMS1.3.1. AMQP1.3.2. JMS1.3.3. AMQP 与 JMS 区别1.4. RabbitMQ**应用场景：****1、双十一商品秒杀/抢票功能实现****2、积分兑换(积分可用于多平台)****3、大平台用户注册**1.5 相关定义：二、安装及配置RabbitMQ2.1. docker中安装RabbitMq2.2. 用户以及Virtual Hosts配置2.2.1. 用户角色2.2.
Struts2与jQuery整合实现Ajax示例
"该资源是一个关于如何在Struts2框架下整合jQuery来实现Ajax功能的示例代码。通过这个demo，开发者可以学习到如何利用Struts2的Action和jQuery的Ajax方法进行异步数据交互，从而提高Web应用的用户体验。" 在Web开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值