DJANGO环境搭建:

目录文件:

关闭CSRF

添加目录文件路径

配置url

视图配置:

index页面配置:

测试:(成功)

进入正题:

ajax 通过GET提交数据至后台:　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

{#    get请求:#}

    <a class="tj" onclick="a1()">提交</a>

    <a class="tj" onclick="a2()">提交</a>

    <script src="/static/js/jquery-1.12.4.min.js"></script>

    <script>

            {#第一种依赖jquery方式#}

            function a1() {

                $.ajax(

                    {

                        url:'/aj1.html',

                        type:'GET',

                        data:{'p':123},

                        {#回调函数#}

                        success:function (arg) {

                        }

                    })

            }

            {#第二种原生DOM发送 不依赖jquery#}

             function a2() {

                var xhr = new XMLHttpRequest();

                xhr.open('GET','/aj1.html?p=321');

                xhr.onreadystatechange = function(){

                  if (xhr.readyState == 4){

                      {#这里readystate是一个状态码:有0,1,2,3,4,其中4是页面加载完成后执行#}

                      console.log(xhr.responseText);

                  }

                };

                xhr.send(null);

                }

    </script>

</body>

</html>

除了index页面修改以外其他配置都不需要修改

测试结果:

ajax 通过POST提交数据至后台:　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

{#    get请求:#}

    <a class="tj" onclick="a1()">提交</a>

    <a class="tj" onclick="a2()">提交</a>

    <script src="/static/js/jquery-1.12.4.min.js"></script>

    <script>

            {#第一种依赖jquery方式#}

            function a1() {

                $.ajax(

                    {

                        url:'/aj1.html',

                        type:'POST',

                        data:{'p':123},

                        {#回调函数#}

                        success:function (arg) {

                        }

                    })

            }

            {#第二种原生DOM发送 不依赖jquery 注意!! django框架 默认需要添加请求头#}

            {#发送数据不在是在url里,而是在最后的send里面发送数据#}

            function a2() {

                var xhr = new XMLHttpRequest();

                xhr.open('POST','/aj1.html');

                xhr.onreadystatechange = function(){

                  if (xhr.readyState == 4){

                      console.log(xhr.responseText);

                  }

                };

            {#django 默认需要请求头,才能解析数据,所以需要加请求头#}

                xhr.setRequestHeader('Content-type',"application/x-www-form-urlencoded");

                {#send为POST 数据#}

                xhr.send("p=321");

            }

    </script>

</body>

</html>

除了index页面修改以外其他配置都不需要修改

测试结果:

伪ajax 提交数据至后台(一般方式,有依赖jquery):　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    {#伪ajax请求 iframe + form 标签绑定方式#}

    {#知识点!!!#}

    {#标签绑定事件 传递(this)这个值是 函数内this代表标签本身,若不传递this则代表windows类#}

    {#DOM/jquery绑定事件 不需要传递this这个参数,绑定事件本身就是this,在函数内this代表标签本身#}

    {#GET/POST 提交方式取决于form表单 提交的method参数#}

{#GET提交#}

    {#html代码开始#}

    <iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block" onload="a2(this)"></iframe>

    <form class='form_1' method="GET" action="/aj1.html" target="ifr">

        <input type="text" class="in" name="p" value="123">

        <input type="submit" onclick="a1()" value="提交">

    </form>

    {#html代码结束#}

{#POST提交#}

    {#html代码开始#}

    {#<iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block" onload="a2(this)"></iframe>#}

    {#<form class='form_1' method="POST" action="/aj1.html" target="ifr">#}

    {#<input type="text" class="in" name="p" value="123">#}

    {#<input type="submit" onclick="a1()" value="提交">#}

    {#</form>#}

    {#html代码结束#}

    <script src="/static/js/jquery-1.12.4.min.js"></script>

    <script>

        function a1() {

            $('.form_1').submit()

        };

        function a2(self) {

            //DOM方式

            console.log(self.contentWindow.document.body.innerText);

            //jquery方式

            console.log($(self).contents().find('body').html());

        };

    </script>

</body>

</html>

测试结果:(GET提交)

伪ajax 提交数据至后台(进阶方式,建议这种方式,不依赖jquery 兼容性高)　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

     {#伪ajax请求 iframe + form DOM绑定方式 建议这种方式,不依赖jquery 兼容性高#}

    <iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block"></iframe>

    <form id='f1' method="GET" action="/aj1.html" target="ifr">

        <input type="text" class="in" name="p" value="123">

        <button onclick="a1()">提交</button>

    </form>

    <script>

        function a1() {

            document.getElementById('p11').onload = a3;

            document.getElementById('f1').submit()

        };

       function a3() {

            console.log(this.contentWindow.document.body.innerText);

            obj = JSON.parse(this.contentWindow.document.body.innerText);

           console.log(obj);

           console.log(typeof obj);

        };

    </script>

</body>

</html>

测试结果:(GET提交)

前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式的更多相关文章

  1. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  2. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  3. 前端向服务器请求数据并渲染的方式（ajax/jQuery/axios/vue）

    原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result

  4. MVC中处理表单提交的方式（Ajax+Jquery）

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  5. JS原生对象实现异步请求以及JQ的ajax请求四种方式

    一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...

  6. ajax下载，前端js下载（转）

    前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...

  7. 2019年6月14日 Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）

    摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...

  8. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  9. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

随机推荐

  1. Json数组对象取值

    1.数据格式 {"data":[{"username":"xxx","avatar":"xxx",& ...

  2. MT【212】合作共赢

    一次会议有1990位数学家参加,每人至少有过1327位合作者,求证:可以找到4位数学家,他们中每一个都合作过. 解答:记与$v_i$合作过的数学家构成集合$A_i(i=1,2,\cdots,1990) ...

  3. Leetcode 347.前K个高频元素 By Python

    给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums = [1], ...

  4. C代码快速构建框架

    #include "stdio.h" typedef char int8_t; typedef short int16_t; typedef int int32_t; typede ...

  5. NOIp2017D2T1(luogu3968) 奶酪 (并查集)

    并查集. 判相切或相交的时候可以两边同时平方,就不需要double和开根号了. #include<cstdio> #include<cstring> #include<a ...

  6. 收藏：解决其它程序与IIS共享80端口的四个方法

    今天写的程序也占用80端口,而 IIS也占用 80端口,我在我的一张网卡上分配了两个IP地址,但是测试发现:只要IIS启动后,我写的程序就无法使用80端口,到网上搜索了一下,终于找到了解决办法: 使用 ...

  7. ReactNative组件之scrollView实现轮播

    想要实现轮播效果,首先安装时间定时器 接下来就是在我们的项目中使用定时器 接下来我们将竖着的轮播图变成横着的 接下来我们调整间距 我们知道轮播图下方,还有5个圆点,那我们怎么做呢? 拿到每一个圆点 看 ...

  8. 对信号量Semaphore的理解与运用

    转: java笔记--对信号量Semaphore的理解与运用 java Semaphore 信号量的使用: 在java中,提供了信号量Semaphore的支持. Semaphore类是一个计数信号量, ...

  9. poj 1759(二分)

    传送门:Problem 1759 https://www.cnblogs.com/violet-acmer/p/9793209.html 题意: 有N个彩灯关在同一条绳上,给出第一个彩灯的高度A,并给 ...

  10. nginx下后端节点realserverweb健康检测模块ngx_http_upstream_check_module

    本文章收录做资料使用,非本人原创,特此说明. 公司前一段对业务线上的nginx做了整理,重点就是对nginx上负载均衡器的后端节点做健康检查.目前,nginx对后端节点健康检查的方式主要有3种,这里列 ...