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. ubuntu 程序后台运行几个方法

    51 1. 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 2. 将1中的命令放在 “()”中, 即 “(./myjob & ...

  2. 睡前小dp-poj1276-多重背包+二进制优化

    http://poj.org/problem?id=1276 简单的多重背包,不过需要优化一下才能过.网上还有暴力的做法. 二进制优化在背包九讲里讲的比较清楚.对于多重背包的每一件物品,使用二进制的形 ...

  3. 自定义缓存设计（static缓存数据）

    设计题 编程过程中,为了解决缓存数据共享的问题,常常会使用static关键字达到脱离具体实例化对象,在整个java进程生命周期内共享数据的目的.请编写一个类,类名为MapCache,拥有但不局限于以下 ...

  4. day27 多态 多继承 接口类 抽象类

    简单来说:多态就是指一个相同的方法名在不同的对象调用的时候实现一样或者不一样的方法实例1: 动物类有个方法 "嚎叫" 狗类也有个方法 "嚎叫" 猫类继承了动物类 ...

  5. day9 函数练习题

    写代码,接受n个数字,求这些数字的和 def sum_func(*args): total = 0 for i in args: total+=i return total print(sum_fun ...

  6. 3分钟上手log4net

    1. config里 <log4net> <appender name="ConsoleAppender" type="log4net.Appender ...

  7. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  8. LOJ#2320 生成树计数

    解:讲一个别的题解里我比较难以理解的地方,就是为什么可以把这两个东西合起来看成某一个连通块指数是2m而别的指数都是m. 其实很好理解,但是别人都略过了......把后面的∑提到∏的前面,然后展开,也可 ...

  9. jsp关闭或刷新浏览器（解决浏览器不兼容），请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  10. 【模板】Trie

    代码如下 int trie[maxn][26],tot=1,ed[maxn]; void insert(char *s){ int len=strlen(s+1),now=1; for(int i=1 ...