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. BZOJ4259 残缺的字符串（FFT）

    两个串匹配时相匹配的位置位置差是相同的,那么翻转一个串就变成位置和相同,卷积的形式. 考虑如何使用卷积体现两个位置能否匹配.一个暴力的思路是每次只考虑一种字符,将其在一个串中设为1,并在另一个串中将不 ...

  2. APICloud之封装webApp

    注册用户 https://www.apicloud.com/ 使用步骤 进入开发控制台 创建应用 选择webApp 根据自己的情况填写信息,然后创建即可 应用创建后的界面 端设置 app界面设置 证书 ...

  3. 关于js特效轮播图练习

    [出现问题] js轮播图,图片未正常轮播. [解决方法] 通过对代码的检查,发现是以下三个原因造成的错误. 1.js代码问题 js代码使用alert(test);,测试修改完毕后,发现依然没有解决错误 ...

  4. servlet表单中get和post方法的区别

    Form中的get和post方法,在数据传输过程中分别对应了HTTP协议中的GET和POST方法.二者主要区别如下: 1.Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据. 2.Ge ...

  5. LOJ #6436. 「PKUSC2018」神仙的游戏(字符串+NTT)

    题面 LOJ #6436. 「PKUSC2018」神仙的游戏 题解 参考 yyb 的口中的长郡最强选手 租酥雨大佬的博客 ... 一开始以为 通配符匹配 就是类似于 BZOJ 4259: 残缺的字符串 ...

  6. 自学Python3.2-函数分类（内置函数）

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  7. 【BZOJ4815】[CQOI2017]小Q的表格（莫比乌斯反演，分块）

    [BZOJ4815][CQOI2017]小Q的表格(莫比乌斯反演,分块) 题面 BZOJ 洛谷 题解 神仙题啊. 首先\(f(a,b)=f(b,a)\)告诉我们矩阵只要算一半就好了. 接下来是\(b* ...

  8. SQLITE在IIS中使用问题

    在WEB中使用这个数据库时,System.Data.SQLite.dll 这个经常会出问题 主要是版本问题,sqlite.DLL的版本要和Framework版本匹配 这是下载地址 http://www ...

  9. bzoj5017 炸弹 (线段树优化建图+tarjan+拓扑序dp)

    直接建图边数太多,用线段树优化一下 然后缩点,记下来每个点里有多少个炸弹 然后按拓扑序反向dp一下就行了 #include<bits/stdc++.h> #define pa pair&l ...

  10. 【poj2396】 Budget

    http://poj.org/problem?id=2396 (题目链接) 题意 给出一个矩阵,给出每一行每一列的和,以及若干限制条件,限制了其中每一个元素的上下界,求一种可行的方案使得每一行每一列数 ...