web前端(6)：Ajax的简单使用

张烫麻辣亮。

已于 2023-02-15 22:37:22 修改

阅读量2.8k

点赞数 7

分类专栏： # -- [WEB前端基础教程] 文章标签： Ajax

于 2019-09-21 16:11:34 首次发布

侵权必究

本文链接：https://blog.csdn.net/qq_40558166/article/details/101109147

版权

-- [WEB前端基础教程] 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

一、为什么使用AJax
二、使用Ajax完成一个get请求
三、使用Ajax完成一个post请求
四、注意

一、为什么使用AJax

1.AJAX 简介

AJAX （全称：Asynchronous JavaScript and XML）异步的 JavaScript 和 XML
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2.AJAX的特点

普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源，页面不需要刷新，并且刷新的时候可能阻塞整个服务。缺点：

用户体验特别差
请求内容和响应内容冗余

基于上面的问题，ajax出现了：

ajax能够发送局部的请求，页面整体不刷新，只是局部刷新
ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务

3.AJAX的结构

$.ajax(  
        {  //  ajax请求的数据需要放在一个对象中
                    url:'请求的路径',         
                    type:'请求的类型，一般是get和post',         
                    data:'请求数据  post请求时候去填写',         
                    success:function (data) {     
                        //  请求成功之后执行的方法， 一般返回json数据
                    },
                    error:function (error) {       
                        //  请求报错之后执行
                    }
                }
            )

二、使用Ajax完成一个get请求

这里是使用Python的Django框架进行演示。

1.在html页面导入jq包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax的get请求</title>
    <script src="/static/js/jquery-1.8.3.min.js"></script>
</head>

2. ajax完成一个get请求，需要后端有两个函数

一个视图函数提供页面
第二个视图负责接收ajax请求，处理ajax请求，返回JsonResponse对象

3.使用get请求判断和数据库中的账户密码是否相同
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax的get请求</title>
    <script src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form action="">
    姓名：<input type="text" id="username" name="username"><br>
    密码：<input type="text" id='password' name="password"><br>
    <input type="button" id="button" value="提交">
</form>
<p id="text"></p>
<script>
    $('#button').click(
        function () {
            username=$('#username').val();//获取姓名值
            password=$('#password').val();//获取密码值
            url='/ajax_get_data/?username='+username+'&password='+password;//拼接get路由
            $.ajax(
                {
                    url:url,
                    type:'get',
                    data:'',//请求数据,get类型不填写
                    success:function (data) { console.log(data);},
                    error:function (error) { }
                }
            )
        }
    ) 
</script>
</body>
</html>

view.py：

from django.http import JsonResponse

def ajax_get(request):
    return render(request,"ajax_get.html")
    
def ajax_get_data(request):
    result = {"code":10000,"content":""}

    username = request.GET.get("username")
    password = request.GET.get("password")
    
    if username=="admin" and password=="xxx":
        result['code'] = 10000
        result['content'] = "请求可为空"
    else:
        result['code'] = 10002
        result['content'] = "用户不存在或者密码不正确"
        
    ##  返回一个json对象
    return JsonResponse(result)

添加路由后，访问页面即可实现

三、使用Ajax完成一个post请求

ajax使用post请求跟get请求一样，也需要两个视图，注意post请求，在Django中会面临CSRF的问题

不同的地方：

get请求拼接路径和参数 /index/?name=zhangsan&age=19
- get请求中的 type = get
post需要构造数据字典
- type = post
- 构造字典的时候需要添加 csrf解决跨域问题
  'csrfmiddenwaretoken':{{ csrf_token }}

html页面

<form  method="post">
    {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>

    <input id = "check_value" type="button" value="提交">

</form>


<script>
    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();  
            $.ajax(
                {
                    url:"/ajax_post_data/",
                    type:"post",
                    data:{
                          "username":username,
                          "password":password,
                           "csrfmiddlewaretoken":"{{ csrf_token }}"
                          }，
                    success:function (data) {
                        console.log(data);
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )
        }
    )
</script>

视图：
在这里插入图片描述
配置路由，验证即可。

四、注意

另外除了使用id的方式，也可以将触发事件写成，onclick调用函数触发。

<input type="button" onclick="re_screenshot('hello')"  value="提交">

<script type="text/javascript">
var re_screenshot = function (media_id) {
        console.log(media_id);
        $.ajax(
            {
                url: '/push_koc_screenshot?media_id=' + media_id,//发起一个ajax请求
                type: 'get',//请求类型
                data: '',//请求数据,get类型不填写
                success: function (data) {//拿到数据，data接口返回的数据
                    console.log(data);
                    console.log(data.code);
                    alert('重新截图成功！十分钟后刷新页面查看！')
                },
                error: function (error) {
                }
            }
        )
    }
</script>

张烫麻辣亮。

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
1
评论
web前端(6)：Ajax的简单使用

AJAX （全称：Asynchronous JavaScript and XML）异步的 JavaScript 和 XMLAJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
复制链接

扫一扫