Ajax的get请求

最新推荐文章于 2025-06-14 20:41:11 发布
最新推荐文章于 2025-06-14 20:41:11 发布
阅读量9.3k 收藏 11
点赞数 2
CC 4.0 BY-SA版权
分类专栏： ajax 文章标签： ajax python django get请求 get带参数请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45179798/article/details/97028043
本文详细介绍了使用AJAX GET请求的基本步骤与应用实例，包括如何创建异步对象、设置请求及回调函数等，并通过具体案例展示了如何实现带有参数的GET请求及简易用户注册功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

请求示例

AJAX的操作步骤

GET请求

  1. 创建 xhr 对象
  2. 创建请求 - open()
  3. 设置回调函数 - onreadystatechange
    1.判断状态
    2.接收响应
    3.业务处理
  4. 发送请求 - send(null)

GET请求 示例

以下代码中显示主要功能:

1.  a 标签 跳转到新的页面(....../ajax/ajax/02-server/)显示 "这是server02的响应"
2.  button 显示按钮 在当前页面显示 "这是server02的响应"
3. 配合下面的Django项目测试异步get请求呈现和 链接

(https://blog.youkuaiyun.com/weixin_45179798/article/details/96967053)[创建异步对象方法]

html 界面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../../static/js/common.js"></script>
    <script src="../../../static/js/exer_get.js"></script>

</head>
<body>
<button onclick="btnShow()">显示</button>
<a href="/ajax/ajax/02-server">显示</a>
<div id="show"></div>
</body>
</html>

views视图的处理

def server02_views(request):
    return HttpResponse("这是server02的响应内容")

js文件

		// 创建异步对象
function createXhr() {

    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
        //console.log(xhr);
        console.log('浏览器支持: XMLHttpRequest')
    } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        //console.log(xhr);
        console.log('浏览器支持ActiveXObject("")')
    }
    return xhr
}


//创建 ajax 请求
function btnShow() {
    //1.创建xhr 调用的函数返回值
    var xhr = createXhr();
    //2.创建请求
    xhr.open("get", "/ajax/02-server", true);
    //3.设置回调函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 接收服务器响应的数据
            var res = xhr.responseText;
            document.getElementById("show").innerHTML = res;
        }
    };
    //4. 发送请求
    xhr.send(null);

}

效果展示

Ajax 异步请求:
在这里插入图片描述

a 标签跳转

在这里插入图片描述

Ajax GET请求 附带参数请求

请求路由的设置

    url(r"03-ajax-get-params/$", views.getparams_views),
    url(r"03-server/$", views.server03_views),

views.py 界面请求函数处理

def getparams_views(request):
    return render(request, 'Ajax/03-ajax-get-params.html')


def server03_views(request):
    # 接收前段传递过来的两个参数
    name = request.GET['name']
    age = request.GET['age']
    # 响应数据
    s = "姓名:%s,年龄%s" % (name, age)
    return HttpResponse(s)

html和js中处理

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>

    <script>
        // 创建异步对象
        function createXhr() {

            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
                //console.log(xhr);
                console.log('浏览器支持: XMLHttpRequest')
            } else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                //console.log(xhr);
                console.log('浏览器支持ActiveXObject("")')
            }
            return xhr
        }

        function btnShow() {
            // 创建xhr
            var xhr = createXhr();
            // 创建请求(带参数)
            var url = "/ajax/03-server?name=wangwc&age=30";
            xhr.open("get", url, true);
            // 设置回调参数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("show").innerHTML = xhr.responseText;
                }
            };
            // 发送请求
            xhr.send(null);
        }

    </script>
</head>
<body>


<button onclick="btnShow()">显示</button>
<div id="show"></div>

</body>
</html>

传参效果
在这里插入图片描述

Ajax GET请求 实现简易注册示例

在这里插入图片描述
请求路由的设置

    url(r"04-register/$", views.register_views),
    url(r"04-checkuname/$", views.checkuname_views),

模型类示例 models.py 需要迁移设置数据库

from django.db import models


# Create your models here.

class Users(models.Model):
    uname = models.CharField("用户名称", max_length=30)
    upwd = models.CharField("用户密码", max_length=30)
    uemail = models.EmailField("电子邮箱")
    nickname = models.CharField("用户昵称", max_length=30)

views.py 界面请求函数处理,数据库和模型需要自己配置

def register_views(request):
    return render(request, "Ajax/04-register.html")


def checkuname_views(request):
    # 接受前段传递的参数
    uname = request.GET['uname']

    # 判断uname在User实体中是否存在[查询操作]
    user = Users.objects.filter(uname=uname)
    # 根据查询结果给出响应
    if user:
        return HttpResponse(1)
    return HttpResponse(0)


# 用户注册处理
def reguser_views(request):
    # 接收前段传递的数据
    uname = request.GET["uname"]
    upwd = request.GET["upwd"]
    uemail = request.GET["uemail"]
    nickname = request.GET["nickname"]
    # 通过实体类实现增加操作(通过异常来处理增加失败的问题)
    try:
        Users.objects.create(uname=uname, upwd=upwd, uemail=uemail, nickname=nickname)
        return HttpResponse(1)
    except Ellipsis as ex:
        print(ex)
        return HttpResponse(0)

html和js中处理

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建异步对象
        function createXhr() {

            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
                //console.log(xhr);
                console.log('浏览器支持: XMLHttpRequest')
            } else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                //console.log(xhr);
                console.log('浏览器支持ActiveXObject("")')
            }
            return xhr
        }


    </script>
    <script src="../../../static/js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            /*
            * 为 #uname 绑定 blur 事件
            * */
            $('#uname').blur(function () {
                // 创建xhr
                var xhr = createXhr();
                // 创建请求 - /ajax/04-checkuname
                var uname = $("#uname").val();
                var url = '/ajax/04-checkuname?uname=' + uname;
                xhr.open("get", url, true);
                // 设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //$("#uname-tip").html(xhr.responseText);
                        if (xhr.responseText == "1") {
                            $('#uname-tip').html("The user name already exists")
                        } else {
                            $('#uname-tip').html("Available user name")
                        }
                    }
                };

                // 发送请求
                xhr.send(null);

            });


            /*为btnReg 绑定事件完成注册*/
            $("#btnReg").click(function () {
                // 1 . 创建异步对象xhr
                var xhr = createXhr();
                // 2 创建请求
                var uname = $("#uname").val();
                var upwd = $("#upwd").val();
                var uemail = $("#uemail").val();
                var nickname = $("#nickname").val();
                var url = "/ajax/04-reguser?uname="
                    + uname + "&upwd="
                    + upwd + "&uemail="
                    + uemail + "&nickname="
                    + nickname;
                console.log(url);
                xhr.open("get", url, true);
                // 3.设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        if (xhr.responseText == "1") {
                            alert("注册成功");
                        } else {
                            alert("注册失败");
                        }
                    }
                };
                //4.发送请求
                xhr.send(null)

            });


        });
    </script>
</head>
<body>
<div>
    <p>
        用户名称:
        <input type="text" id="uname">
        <span id="uname-tip"></span>
    </p>
    <p>
        用户密码: <input type="password" id="upwd">
    </p>
    <p>
        电子邮箱: <input type="email" id="uemail">
    </p>
    <p>
        用户昵称: <input type="text" id="nickname">
    </p>
    <p>
        <input type="button" value="注册" id="btnReg">
    </p>

</div>
</body>
</html>

效果

【03】AJAX发送get请求
hejuan___的博客
01-10 1220
/ 2.初始化，设置请求方法'get'和url'http://127.0.0.1:8000'readystate：是xhr对象中的属性，表示状态0 1 2 3 4。// 2xx 表示成功，所以status的范围是[200，300）// 判断响应状态码：200 401 403 500。// 4.事件绑定，处理服务端返回的结果。change：改变*///将响应体中的内容添加到文本框dd中。//将响应体中的内容添加到文本框dd中。// 判断（服务器返回的所有结果）//为按钮btn绑定单击事件。
AJAX--GET请求
qq_45728623的博客
08-15 1182
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX GET 请求</title> <style> #result{ width: 200px; height: 100px; border: solid 1px #90.
vue课程75 axios是只专注于网络请求的库
geyaoisnice的博客
07-01 284
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
Ajax-概述、XMLHttpRequest对象、AJAX GET请求、AJAX POST请求
最新发布
m0_73941339的博客
06-14 929
本文深度解析传统请求痛点（页面刷新/体验割裂），详解AJAX核心XMLHttpRequest对象四步使用法（创建→回调→开启→发送），手写GET/POST请求解决缓存与数据提交难题，并附表单模拟实战代码。助你彻底掌握异步交互，实现页面无刷新更新！
原生js操作ajax基本操作
407指导员
12-22 565
原生js操作ajax基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX GET 请求</title> <style>
Ajax之get方式请求
杜小白的博客
07-13 5953
ajax之get请求需要注意的两个地方：在url后边以请求字符串（传递的get参数信息）形式传递数据。对中文、=、&amp;等特殊符号处理对特殊信息的处理：在浏览器里通过get参数传递一些特殊符号信息会被误解混淆，例如&amp;、=等；为了避免特殊符号被误解产生歧义，需要对其进行编码处理。同时如果传递get参数中文信息，也需要进行编码处理。在php里边可以通过函数urlencode()/urlde...
Ajax-GET请求
廖若星辰-LTY
09-01 6810
Ajax的意思是：异步JavaScript和XML。 通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。 Ajax能让我们轻松实现网页与服务器之间的数据交互。 Ajax的底层实现主要是用到浏览器中提供的XMLHttpRequest对象用法比较复杂，所以jQuery对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。 使用XMLHttpRequest发起GET请求 使用XMLHttpRequest（简称
使用Ajax get请求数据用for循环展示到列表上
10-18
使用ajax请求数据，并用循环的方式放到表格里，展示到页面。
原生 JS Ajax,GET和POST 请求实例代码
11-25
这里我们将深入探讨GET和POST两种HTTP请求方式的实现。 首先，我们来看GET请求的实例。在提供的代码中，`GetXmlHttpObject()`函数用于创建XMLHttpRequest对象，这是Ajax的核心。对于现代浏览器，它会创建一个新的`...
ajax get请求中文参数乱码解决
03-18
在进行Web开发时，我们经常会遇到Ajax GET请求发送中文参数时出现乱码的问题。这个问题主要源于HTTP协议在处理非ASCII字符时的编码不一致。在本文中，我们将深入探讨这个问题，以及如何通过不同的方法来解决它。 ...
实例详解Android Webview拦截ajax请求
08-28
这意味着我们不能在 Webview 中干涉 JavaScript 发起的 HTTP 请求，而有时候我们确实需要能够截获 Ajax 请求并实现一些功能，如统一的网络请求管理、 Cookie 同步、证书校验、访问控制等。 那么，我们可以转换思路...
Ajax GET请求
宇臾的博客
01-03 1220
GET请求主要用于获取服务器端的数据，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。因为GET请求只是获取服务器端的数据，不会对服务器的数据做更改，所以被认为是安全的请求方式，但是涉及到用户登录这一类包含用户私密信息的却不适合用GET请求，因为请求数据附加在URL
AJAX GET请求
忆亦何为的博客
10-13 926
发送AJAX get请求步骤 AJAX GET请求的缓存问题
ajax的get请求
weixin_43931159的博客
12-13 500
一、首先在views.py文件里定义如下函数： def ajaxview1(request): return render(request,'ajaxget.html') def ajaxview(request): list1=['小张','老李','老王'] return JsonResponse({'usernames':list1}) 注意：返回的JsonRespons...
JavaScript4：JSON、AJAX、；jQuery
m0_49324736的博客
10-20 363
JavaScript JSON //数据的封装 <script type="text/javascript"> //ES5没有类的概念 有对象 ES6 class 类这个概念 //name age sex eat() sleep() function Student(name, age, sex) { //alert("构造函数调用了") this.n
AJAX GET 请求
IT913913的博客
04-22 238
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
AJAX实现简单get/post请求
weixin_59528719的博客
02-23 5064
AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。什么是异步，什么是同步？假设有t1和t2线程，t1和t2线程并发，就是异步。假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。AJAX代码属于WEB前端的JS代码。
Ajax get请求示例
热门推荐
MusicMan
07-03 1万+
正好早上有时间，代码： $.ajax({ type:'GET', url:'proinfo', data:data, success:function(result){ //返回成功进行响应操作 //把获取信息填...
AJAX--get请求
weixin_44462482的博客
10-26 269
AJAX–get请求 1、创建对象` var xhr = new XMLHttpResquest(); 2、初始化，设置请求方法和url (？后为参数) //url 为本地服务器http://127.0.0.1:3000/server xhr.open(‘GET’,‘http://127.0.0.1:3000/server?a=100&b=200&c=300’); 3、发送请求 xhr.send(); 4、事件绑定，处理服务器返回结果 //readyState 为xhr中的属性，
Django处理Ajax GET请求完整教程
"本文将深入探讨如何在Django框架中处理Ajax发送的GET请求，以及Ajax的优势和相关实例。" Django是一个强大的Python Web框架，它支持多种HTTP方法，包括GET请求。Ajax（Asynchronous JavaScript and XML）技术常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值