jquery实现ajax无刷新效果

最新推荐文章于 2021-08-06 16:22:28 发布

Dannii_

最新推荐文章于 2021-08-06 16:22:28 发布

阅读量1.8k

点赞数

分类专栏： jQuery 文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_36748278/article/details/77793537

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、get请求和post请求
语法：jquery.get（url，[data]，[callback]，[type]）
语法：jquery.post（url，[data]，[callback]，[type]）

参数：url是必须的，其他三个都是可选的参数。
          url：待载入页面的url地址
          data：要发送的key/value参数
          callback：载入成功时的回调函数
          type：返回内容格式，xml, html, script, json, text, _default

2、举例
获得AjaxServlet页面返回的 json 格式的内容：

$.post("AjaxServlet",                             //1、请求的页面
    {                                             //2、要发送的键值对数据
        "username": "lili" 
    },
    function(data){                               //3、请求成功的回调函数,data是传递回来的数据
        console.log(data);             
    }, "json");                                   //4、返回内容的类型

3、做一个特别简单的例子体会一下用法。
index.jsp界面代码：

<%@ 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.js"></script>
    <script type="text/javascript">
        function doGet(){                     
            var url = "AjaxServlet";          //请求的地址
            $.get(url,function(data){         //get请求
                alert(data);                  //data：请求返回的数据
            });
        }

        function doPost(){
            var url = "AjaxServlet";          //请求的地址
            $.post(url,{                      //post请求发送的数据，键值对。可以通过request.getParameter("键")来获得传递的数据的值
                "usernameA":"admin",
                "password":"123123"
            },function(data){                  //回调函数
                if(data == "success"){
                    alert("成功");
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" value="getTest" onclick="doGet()">
    <input type="button" value="postTest" onclick="doPost()">
</body>
</html>

AjaxServlet代码：

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        out.print("这是get请求返回的内容");                              //这是返回的data，会发送到页面
        out.flush();
        out.close();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");                         //设置响应的编码格式，以防止中文乱码

        String username = request.getParameter("usernameA");            //得到post请求的时候传递进来的键值对
        String password = request.getParameter("password");

        PrintWriter out = response.getWriter();
        if ("admin".equals(username) && "123123".equals(password)) {     //admin和123123是自己随便写的测试数据
            out.print("success");                                        //print的内容会输出到页面                      
        } else {
            out.print("fail");
        }
        out.flush();
        out.close();
    }
}

页面如下：点击getTest，会发送get请求，然后弹出返回的数据。但是我们可以看到虽然发送了请求，但是页面并没有刷新。
这里写图片描述

其实逻辑也就这么简单
1、请求通过url地址到要请求的目标地址
2、目标地址进行一系列操作将需要返回数据输出到页面，是通过创建response.getWriter()的输出流，通过输出流的print()方法把返回的内容发送到页面。
3、请求方法通过回调函数function(data){}来接收到目标地址输出到页面的数据data
4、期间的请求都是不刷新的。

下面这是使用JavaScript实现的get和post请求：

<script type="text/javascript">
    var request = new XMLHttpRequest();

    function doGet() {
        var urls = "http://localhost:1234/Ajax/AjaxServlet";

        request.open("GET", urls);                    //设置打开方式为get和请求的地址

        request.send(null);                           //准备发送请求

        request.onreadystatechange = function() {
            if(request.readyState == 4 && request.status == 200) {
                var temp = request.responseText;      //响应的文本
            }
        }
    }

    function doPost() {
        var urls = "http://localhost:1234/Ajax/AjaxServlet";

        request.open("POST", urls);                                                      //设置打开方式为post和请求地址

        request.setRequestHeader("content-Type","application/x-www-form-urlencoded");    //设置以表单形式提交
        request.send("username=aaaa&password=123");                                       //准备发送请求（post请求有参数）

        request.onreadystatechange = function() {
            if(request.readyState == 4 && request.status == 200) {
                var temp = request.responseText;       //响应的文本
            }
        }
    }   
</script>

Dannii_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现ajax无刷新效果

1、get请求和post请求语法：jquery.get（url，[data]，[callback]，[type]）语法：jquery.post（url，[data]，[callback]，[type]）参数：url是必须的，其他三个都是可选的参数。 url：待载入页面的url地址 data：要发送的key/value参数 ca
复制链接

扫一扫