3_jQuery实现ajax的其他写法

ゝ一纸荒年。 2023-09-30 18:29 16阅读 0赞

jQuery实现AJAX的其他写法

4.3.1 $.load()

jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式,

语法为:

$(selector).load(URL,data,callback);

![f75ddc5da71c3074bcafd1e53aab0cf2.gif][]

![052149b00c3b1c9654ae370bdf065ae9.gif][]

参数的含义为:

url: URL地址
    
     
    data:待发送参数。
    
     
    callback:载入成功时回调函数。

![e254950d162f9dcc90db5cb0d13070d4.gif][]

![3d033eefc32de3018748dfddb4889f46.gif][]

测试代码

准备第一个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <script>
            function testLoad(){
                //$("#d1").load("servlet2.do","username=aaa&password=bbb",function(){alert("响应结束")})
                $("#d1").load("loadPage.html #a")
            }
        </script>
    </head>
    <body>
    <div id="d1" style="width: 100px;height: 100px;border: 1px solid black">
    </div>
    <input type="button" value="测试" onclick="testLoad()">
    </body>
    </html>

![570c491799fdff72fd02d8dc8a2b68f7.gif][]

![be87c80534fe56a87b0f6477b6f2b5a2.gif][]

第二个页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="a">
        <li>JAVA</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>Mysql</li>
        <li>python</li>
    </div>
    </body>
    </html>

![c7a3f8f64d18cd6631311e8b6ba79aa4.gif][]

![4e8432f7f330c09bc0280ead962440a1.gif][]

后台代码

package com.msb.servlet;
    import com.google.gson.Gson;
    import com.google.gson.GsonBuilder;
    import com.msb.pojo.Student;
    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 java.io.IOException;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.Date;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @WebServlet("/servlet2.do")
    public class Servlet2 extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            System.out.println(username);
            System.out.println(password);
            resp.setContentType("text/html;charset=UTF-8");
            resp.setCharacterEncoding("UTF-8");
            resp.getWriter().print("<h1>hello</h1>");
        }
    }

![2e17aae4fe4d14fb577089dbf53abffc.gif][]

![5df92607a310c4609c193286667ded5c.gif][]

4.3.1 $.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

语法为:

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

![b8f052cfb096defe4cc68cff483de305.gif][]

![770819b7eef4c8ff2272319064cdd69b.gif][]

参数的含义为:

url: URL地址

data:待发送参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, \_default

该函数是简写的 Ajax 函数，等价于：

$.ajax({
    
     type:   'GET',
      url: url,
    
     
      data: data,
    
     
      success: success,
    
     
      dataType: dataType
    
     
    });

![8bf8a03204dbc58790e085418937fbf4.gif][]

![0c6ea73079927cfbdbbebe598f37df0d.gif][]

4.3.1 $.getJSON()

JSON是一种较为理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。语法为:

$.getJSON(
    
     
          url,             //请求URL
    
     
          [data],          //传参，可选参数
    
     
          [callback]       //回调函数，可选参数
    
     
       　);

![624aee8c3c13f75e62c90c98e30142cb.gif][]

![9bdf91ccf25fcccde0eef8777f3062ff.gif][]

该函数是简写的 Ajax 函数，等价于：

$.ajax({
    
     
      url: url,
    
     
      data: data,
    
     
      success: callback,
    
     
      dataType: json
    
     
    });

![c6481f253e67260d90c54733353b553b.gif][]

![8ec9515070d45ad342572b671e4ef5a3.gif][]

仅仅是等效于上述函数,但是除此之外这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成"myurl?callback=X"这种格式，让程序执行回调函数X。

注意:$.getJSON是以GET方式提交数据，如果需要提交很大的数据量，可选$.post

$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

语法为:

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

![accc32d5b44159fe67addf2c45c5eeab.gif][]

![8ef260298eb24b6914107726f58a864c.gif][]

参数的含义为:

url: URL地址
    
     
    data:待发送参数。
    
     
    callback:载入成功时回调函数。
    
     
    type:返回内容格式，xml, html, script, json, text, _default

![a49cc74f6fc43ec2a6bf03ab114e9d82.gif][]

![Image 1][]

该函数是简写的 Ajax 函数，等价于：

$.ajax({
    
     
      type:   'POST',
    
     
      url: url,
    
     
      data: data,
    
     
      success: success,
    
     
      dataType: dataType
    
     
    });

![2d1d604cb8450898f73f0a2dfe789d79.gif][]

![e684198d48b59bbbaf3589985900101e.gif][]

前端代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <script>
            function testAjax(){
                $.get(
                    "servlet1.do",
                    {"username":"zhangsan","password":"123456"},
                    function(list){
                        $.each(list,function(i,e){
                            console.log(e)
                        })
                     },
                    "json")
                console.log("------------------------------")
                $.getJSON(
                    "servlet1.do",
                    {"username":"zhangsan","password":"123456"},
                    function(list){
                        $.each(list,function(i,e){
                            console.log(e)
                        })
                    })
                console.log("------------------------------")
                $.post(
                    "servlet1.do",
                    {"username":"zhangsan","password":"123456"},
                    function(list){
                        $.each(list,function(i,e){
                            console.log(e)
                        })
                    },
                    "json")
            }
        </script>
    </head>
    <body>
    <input type="button" value="测试" onclick="testAjax()">
    </body>
    </html>

![Image 1][]

![65b2351a7201d0894997c9ca6d156748.gif][]

后端代码

package com.msb.servlet;
    import com.google.gson.Gson;
    import com.google.gson.GsonBuilder;
    import com.msb.pojo.Student;
    import sun.util.calendar.LocalGregorianCalendar;
    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 java.io.IOException;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.Date;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @WebServlet("/servlet1.do")
    public class Servlet1 extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            System.out.println(username);
            System.out.println(password);
            Student stu1=new Student("小黑","男",10,new Date());
            Student stu2=new Student("小白","男",10,new Date());
            Student stu3=new Student("小黄","男",10,new Date());
            Student stu4=new Student("小花","男",10,new Date());
            ArrayList<Student> list =new ArrayList<>();
            Collections.addAll(list,stu1,stu2,stu3,stu4);
            GsonBuilder gb =new GsonBuilder();
            gb.setDateFormat("yyyy-MM-dd");
            Gson gson = gb.create();
            String json = gson.toJson(list);
            resp.setContentType("text/html;charset=UTF-8");
            resp.setCharacterEncoding("UTF-8");
            resp.getWriter().print(json);
        }
    }

![0944f652dd3c9a8a822e022cb6f93ca7.gif][]

![844743465406ea42466d8dea65ec00c1.gif][]

[f75ddc5da71c3074bcafd1e53aab0cf2.gif]: https://img-blog.csdnimg.cn/img_convert/f75ddc5da71c3074bcafd1e53aab0cf2.gif
[052149b00c3b1c9654ae370bdf065ae9.gif]: https://img-blog.csdnimg.cn/img_convert/052149b00c3b1c9654ae370bdf065ae9.gif
[e254950d162f9dcc90db5cb0d13070d4.gif]: https://img-blog.csdnimg.cn/img_convert/e254950d162f9dcc90db5cb0d13070d4.gif
[3d033eefc32de3018748dfddb4889f46.gif]: https://img-blog.csdnimg.cn/img_convert/3d033eefc32de3018748dfddb4889f46.gif
[570c491799fdff72fd02d8dc8a2b68f7.gif]: https://img-blog.csdnimg.cn/img_convert/570c491799fdff72fd02d8dc8a2b68f7.gif
[be87c80534fe56a87b0f6477b6f2b5a2.gif]: https://img-blog.csdnimg.cn/img_convert/be87c80534fe56a87b0f6477b6f2b5a2.gif
[c7a3f8f64d18cd6631311e8b6ba79aa4.gif]: https://img-blog.csdnimg.cn/img_convert/c7a3f8f64d18cd6631311e8b6ba79aa4.gif
[4e8432f7f330c09bc0280ead962440a1.gif]: https://img-blog.csdnimg.cn/img_convert/4e8432f7f330c09bc0280ead962440a1.gif
[2e17aae4fe4d14fb577089dbf53abffc.gif]: https://img-blog.csdnimg.cn/img_convert/2e17aae4fe4d14fb577089dbf53abffc.gif
[5df92607a310c4609c193286667ded5c.gif]: https://img-blog.csdnimg.cn/img_convert/5df92607a310c4609c193286667ded5c.gif
[b8f052cfb096defe4cc68cff483de305.gif]: https://img-blog.csdnimg.cn/img_convert/b8f052cfb096defe4cc68cff483de305.gif
[770819b7eef4c8ff2272319064cdd69b.gif]: https://img-blog.csdnimg.cn/img_convert/770819b7eef4c8ff2272319064cdd69b.gif
[8bf8a03204dbc58790e085418937fbf4.gif]: https://img-blog.csdnimg.cn/img_convert/8bf8a03204dbc58790e085418937fbf4.gif
[0c6ea73079927cfbdbbebe598f37df0d.gif]: https://img-blog.csdnimg.cn/img_convert/0c6ea73079927cfbdbbebe598f37df0d.gif
[624aee8c3c13f75e62c90c98e30142cb.gif]: https://img-blog.csdnimg.cn/img_convert/624aee8c3c13f75e62c90c98e30142cb.gif
[9bdf91ccf25fcccde0eef8777f3062ff.gif]: https://img-blog.csdnimg.cn/img_convert/9bdf91ccf25fcccde0eef8777f3062ff.gif
[c6481f253e67260d90c54733353b553b.gif]: https://img-blog.csdnimg.cn/img_convert/c6481f253e67260d90c54733353b553b.gif
[8ec9515070d45ad342572b671e4ef5a3.gif]: https://img-blog.csdnimg.cn/img_convert/8ec9515070d45ad342572b671e4ef5a3.gif
[accc32d5b44159fe67addf2c45c5eeab.gif]: https://img-blog.csdnimg.cn/img_convert/accc32d5b44159fe67addf2c45c5eeab.gif
[8ef260298eb24b6914107726f58a864c.gif]: https://img-blog.csdnimg.cn/img_convert/8ef260298eb24b6914107726f58a864c.gif
[a49cc74f6fc43ec2a6bf03ab114e9d82.gif]: https://img-blog.csdnimg.cn/img_convert/a49cc74f6fc43ec2a6bf03ab114e9d82.gif
[Image 1]: 
[2d1d604cb8450898f73f0a2dfe789d79.gif]: https://img-blog.csdnimg.cn/img_convert/2d1d604cb8450898f73f0a2dfe789d79.gif
[e684198d48b59bbbaf3589985900101e.gif]: https://img-blog.csdnimg.cn/img_convert/e684198d48b59bbbaf3589985900101e.gif
[65b2351a7201d0894997c9ca6d156748.gif]: https://img-blog.csdnimg.cn/img_convert/65b2351a7201d0894997c9ca6d156748.gif
[0944f652dd3c9a8a822e022cb6f93ca7.gif]: https://img-blog.csdnimg.cn/img_convert/0944f652dd3c9a8a822e022cb6f93ca7.gif
[844743465406ea42466d8dea65ec00c1.gif]: https://img-blog.csdnimg.cn/img_convert/844743465406ea42466d8dea65ec00c1.gif