1_jQuery.ajax()的简单使用

迷南。 2023-09-27 13:48 99阅读 0赞

每次书写AJAX代码比较繁琐 步骤都是一样的,数据回显使用原生js代码也比较繁琐,可以使用jQuery对上述问题进行优化,jQuery不仅仅对dom操作进行了封装 同时也对AJAX提交和回显已经进行了封装,可大大简化AJAX的操作步骤

![bb89812610a8fb4375c024b4ef8f1133.png][]

#### jQuery.ajax()的简单使用 ####

基本语法为(经典语法):

前端代码

<html>
    <head>
        <title>$Title%sSourceCode%lt;/title>
        <meta charset="UTF-8"/>
        <script src="js/jquery.min.js"></script>
        <script>
            function checkUname(){
                // 获取输入框中的内容
                if(null == $("#unameI").val() || '' == $("#unameI").val()){
                    $("#unameInfo").text("用户名不能为空");
                    return;
                }
                $("#unameInfo").text("");
                // 通过jQuery.ajax() 发送异步请求
                $.ajax(
                        {
                            type:"GET",// 请求的方式 GET  POST
                            url:"unameCheckServlet.do?", // 请求的后台服务的路径
                            data:"uname="+$("#unameI").val(),// 提交的参数
                            success:function(info){ // 响应成功执行的函数
                                $("#unameInfo").text(info)
                            }
                        }
                )
            }
        </script>
    </head>
    <body>
    <form action="myServlet1.do" >
        用户名:<input id="unameI" type="text" name="uname" onblur="checkUname()">
        <span id="unameInfo" style="color: red"></span><br/>
        密码:<input type="password" name="pwd"><br/>
        <input type="submit" value="提交按钮">
    </form>
    </body>
    </html>

后台代码

package com.msb.servlet;
    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;
    /**
     * @Author: Ma HaiYang
     * @Description: MircoMessage:Mark_7001
     */
    @WebServlet("/unameCheckServlet.do")
    public class UnameCheckServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String uname = req.getParameter("uname");
            String info="";
            if("msb".equals(uname)){
                info="用户名已经占用";
            }else{
                info="用户名可用";
            }
            // 向浏览器响应数据
            resp.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");
            resp.getWriter().print(info);
        }
    }

**JSON****格式处理**

**前端代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <script>
            function testAjax(){
                // 向后台发送一个ajax异步请求
                // 接收响应的数据
                $.ajax(
                    {
                        type:"GET",
                        url:"servlet1.do",
                        data:{"username":"zhangsan","password":"123456"},// key=value&key=value  {"属性名":"属性值"}
                        dataType:"json",//以什么格式接收后端响应给我们的信息
                        success:function(list){
                            $.each(list,function(i,e){
                                console.log(e)
                            })
                        }
                    }
                )
            }
        </script>
    </head>
    <body>
    <input type="button" value="测试" onclick="testAjax()">
    </body>
    </html>

**后台代码**

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);
        }
    }

[bb89812610a8fb4375c024b4ef8f1133.png]: https://img-blog.csdnimg.cn/img_convert/bb89812610a8fb4375c024b4ef8f1133.png