jQuery 第六章 jQuery在Ajax应用

时间：2023-03-09 00:00:28
jQuery 第六章 jQuery在Ajax应用

1.本章目标

　　ajax

2.ajax

　　异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互

　　用户体验好

　　地图,前台验证,表单提交,修改,查询等等

　　

　　原生的js和ajax

　　

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class Ajaxservlet

 */

@WebServlet(name="Ajaxservlet",urlPatterns="/Ajaxservlet")

public class Ajaxservlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

        //中文乱码处理

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取前端请求过来的参数,name

        String name=request.getParameter("name");

        System.out.println(name);

        if(name!=null&&"admin".equals(name)){

            response.getWriter().write("成功");

        }else{

            response.getWriter().write("失败");

        }

    }

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

    }

}

servlet

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

        <script type="text/javascript">

            function ceshi(){

                //获取文本框的数据

                var v = document.getElementById("uid").value

                //创建xml对象

                var xmlHttp=new XMLHttpRequest();

                //打开请求,第一个参数:提交方式,第二个参数:请求路径,第三个参数,是否异步

                xmlHttp.open("Get","http://localhost:8080/jquery-chapter6-ajax/Ajax.jsp?name="+v,true);

                //设置回调函数

                xmlHttp.onreadystatechange = function(){

                    //判断状态

                    if(xmlHttp.readyState==4&&xmlHttp.status==200){

                        //成功之后获取服务端响应回来的数据

                        //var txt = xmlHttp.responseText;

                        alert(xmlHttp.responseText)

                    }

                }

                //发送请求

                xmlHttp.send(null)

            }

        </script>

    </head>

    <body>

        <input id="uid" />

        <button onclick="ceshi()">发送ajax请求到后台交互</button>

    </body>

</html>

ajax的原生异步

　　jquery的ajax

判断账号密码输入正确 错误

<%@ 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">

<title>Insert title here</title>

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

<script type="text/javascript">

    $(function(){

        $("button").click(function(){

            //获取输入框的值

            var name=$("#uid").val();

            var pwd=$("#pid").val();

            //jquery-ajax

            $.ajax({

                async:true,//表示请求是否异步处理。默认是 true。

                cache:false,//表示浏览器是否缓存被请求页面。默认是 true。

                data:'uname='+name+'&pname='+pwd,//规定要发送到服务器的数据。

                dataType:'text',//预期的服务器响应的数据类型。

                type:'post',//请求方式,默认:get

                url:'demo1Servlet',//请求路径

                success:function(data){ //请求成功后的回调函数  data时服务端的响应数据,形参名(自定义)

                    alert(data);

                },

                //请求失败后的回调函数

                error:function(){

                    alert('ajax请求失败');

                },

                //请求完成后的回调函数,无论成功还是失败都回调

                complete:function(){

                    alert('ajax请求完成');

                }

            })

        })

    })

</script>

</head>

<body>

    <form>

        账号:<input id="uid"/><br/>

        密码:<input id="pid"/><br/>

    </form>

    <button>发送ajax请求</button>

</body>

</html>

demo1 jsp

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(name="Demo1Servlet",urlPatterns="/demo1Servlet")

public class Demo1Servlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

        doPost(request, response);

    }

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

        //中文乱码处理

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取请求参数

        String uname=request.getParameter("uname");

        String pname=request.getParameter("pname");

        System.out.println(uname+pname);

        //模拟数据库的验证

        if("zhangsan".equals(uname)&&"123456".equals(pname)){

            response.getWriter().write("正确");

        }else{

            response.getWriter().write("错误");

        }

        }

}

demo1servlet

简洁版ajax    取uname  pname    必须和后台取页面 相同   .serialize()

    $.ajax({

                type:'post',//请求方式,默认:get

                url:'demo1Servlet',//请求路径

                data:$("#myform").serialize(),

                success:function(data){ //请求成功后的回调函数  data时服务端的响应数据,形参名(自定义)

                    alert(data);

                }

            })

简洁版ajax

家庭作业:::::::前端，通过jquery ajax请求servlet，获取到json字符串数据，然后在前端进行解析，展示到页面中（自行百度）

在后台 取到json数据 展示到前台表格里  需要在里面设置

response.setContentType("application/json;charset=utf-8");

具体前后台代码如下

<%@ 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">

<title>Insert title here</title>

<style type="text/css">

            table{

                width: 480px;

                height: 200px;

                border-collapse: collapse;

            }

            table tr th,td{

                border-collapse: collapse;

                border: 1px solid darkgoldenrod;

                text-align: center;

            }

            table td{

                width:160px;

                height: 50px;

            }

        </style>

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

    <script type="text/javascript">

    $(document).ready(function(){

        //发送ajax请求

        $.ajax({

            type:"post",

            url:"homeworkServlet",

            success:function(data){

                //把响应的数据转为json对象

                //var u= JSON.parse(data);

                var u=data;

                for(var i=0;i<u.length;i++){

                    var tr= "<tr>";

                    tr+="<td>"+u[i].name+"</td>";

                    tr+="<td>"+u[i].sex+"</td>";

                    tr+="<td>"+u[i].age+"</td>";

                    tr+="</tr>";

                    $("table").append($(tr));

            }

            }

        })

    })

</script>

</head>

<body>

    <table border="1px" id="tab">

    <tr>

    <td>姓名</td>

     <td>性别</td>

     <td>年龄</td>

    </tr>

    </table>

</body>

</html>

前台

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.google.gson.Gson;

@WebServlet(name="HomeworkServlet",urlPatterns="/homeworkServlet")

public class HomeworkServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

        doPost(request, response);

    }

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

        //中文乱码处理

        request.setCharacterEncoding("utf-8");

        response.setContentType("application/json;charset=utf-8");

        //获取请求参数

        Demo demo=new Demo();

        List<User> list=demo.getinfo();

        //创建gson对象

        Gson gson = new Gson();

        String json = gson.toJson(list);

        response.getWriter().write(json);

        }

}

后端servlet

import java.util.ArrayList;

import java.util.List;

import com.google.gson.Gson;

import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XsiNilLoader.Array;

public class Demo {

    public static List<User> getinfo(){

        List<User> list = new ArrayList<>();

        for(int i=1;i<=5;i++){

            User u = new User(i, "张三"+i,"男",16);

            list.add(u);

            Gson gson = new Gson();

            String json = gson.toJson(list);

        }

        return list;

    }

    public static void main(String[] args) {

        List<User> list=getinfo();

        //把list集合转为json字符串

        //创建gson对象

        Gson gson = new Gson();

        String json = gson.toJson(list);

        System.out.println(json);

        //家庭作业

        //前端，通过jquery ajax请求servlet，获取到json字符串数据，然后在前端进行解析，展示到页面中（自行百度）

    }

}

class User{

    private int id;

    private String name;

    private String sex;

    private int age;

    public int getId() {

        return id;

    }

    public void setId(int id) {

        this.id = id;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getSex() {

        return sex;

    }

    public void setSex(String sex) {

        this.sex = sex;

    }

    public int getAge() {

        return age;

    }

    public void setAge(int age) {

        this.age = age;

    }

    public User(int id, String name, String sex, int age) {

        super();

        this.id = id;

        this.name = name;

        this.sex = sex;

        this.age = age;

    }

}

创建 信息 以及实体类

jquery.post(提交方法)

$.post('demo3Servlet',{uname:uname,pname:pname},function(data){
                
                alert(data);
            })

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(name="Demo3Servlet",urlPatterns="/demo3Servlet")

public class Demo3Servlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

    }

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

        //中文乱码处理

                request.setCharacterEncoding("utf-8");

                response.setContentType("text/html;charset=utf-8");

                //获取请求参数

                String uname=request.getParameter("uname");

                String pname=request.getParameter("pname");

                System.out.println(uname+pname);

                //模拟数据库的验证

                if("zhangsan".equals(uname)&&"123456".equals(pname)){

                    response.getWriter().write("正确");

                }else{

                    response.getWriter().write("错误");

                }

                }

    }

jquery post提交方法 servlet

<%@ 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">

<title>Insert title here</title>

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

<script type="text/javascript">

    $(function() {

        $("button").click(function(){

            //第一个参数  请求路径

            //第二个参数 请求参数,格式,键值对

            //第三个就是回调函数,函数data就是服务的相应的数据

            var uname=$("#uid").val();

            var pname=$("#pid").val();

            $.post('demo3Servlet',{uname:uname,pname:pname},function(data){

                alert(data);

            })

        })

    })

</script>

</head>

<body>

    <form id="myform">

        账号:<input id="uid" name="uname"/><br/>

        密码:<input id="pid"/ name="pname"><br/>

    </form>

    <button>发送ajax请求</button>

</body>

</html>

jquery post 提交方法 jsp页面

jquery.getJSON()方法

$.getJSON('homeworkServlet',{},function(data){

            //把响应的数据转为json对象

                //var u= JSON.parse(data);

                var u=data;

                for(var i=0;i<u.length;i++){

                    var tr= "<tr>";

                    tr+="<td>"+u[i].name+"</td>";

                    tr+="<td>"+u[i].sex+"</td>";

                    tr+="<td>"+u[i].age+"</td>";

                    tr+="</tr>";

                    $("table").append($(tr));

            }

        })

jquery.getJSON()

　　

相关文章