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. BZOJ2213[Poi2011]Difference——DP

    题目描述 A word consisting of lower-case letters of the English alphabet ('a'-'z') is given. We would li ...

  2. BZOJ2223[Coci 2009]PATULJCI——主席树

    题目描述 输入  先输入一个数n,然后一个数表示这n个数中最大的是多少,接下来一行n个数.然后一个数m,最后m行询问每次两个数l,r. 输出 no或者yes+这个数 样例输入 10 3 1 2 1 2 ...

  3. BZOJ3160 万径人踪灭（FFT+manacher）

    容易想到先统计回文串数量,这样就去掉了不连续的限制,变为统计回文序列数量. 显然以某个位置为对称轴的回文序列数量就是2其两边(包括自身)对称相等的位置数量-1.对称有啥性质?位置和相等.这不就是卷积嘛 ...

  4. BZOJ2716 [Violet]天使玩偶（cdq分治+树状数组）

    非常裸的KD-tree.然而我没学啊. 考虑如何离线求一个点在平面中的曼哈顿最近点. 绝对值显得有点麻烦,于是把绝对值拆开分情况讨论一波.对于横坐标小于该点的,记录对于纵坐标的前缀x+y最大值和后缀x ...

  5. Fantasy of a Summation LightOJ - 1213 （快速幂）

    题意: 首先 只看第一层循环的A[0],是不是用了nk-1次  A[1]也是用了nk-1次······ 所以 第一层的sum(A[i]的和) 一共用了nk-1 所以第一层为sum * nk-1 因为又 ...

  6. java监控工具VisualVM

    java监控工具VisualVM https://visualvm.github.io/ https://visualvm.github.io/documentation.html https://h ...

  7. Rsync 客户端配置

    安装rsync服务yum -y install rsync 创建密码文件rsync.passwordvi /etc/rsync.password只存储密码即可,无需用户名.密码为Rsync服务器端的/ ...

  8. 【BZOJ3202】项链（莫比乌斯反演，Burnside引理）

    [BZOJ3202]项链(莫比乌斯反演,Burnside引理) 题面 BZOJ 洛谷 题解 首先读完题目,很明显的感觉就是,分成了两个部分计算. 首先计算本质不同的珠子个数,再计算本质不同的项链个数. ...

  9. 跟我一起学习vue2（学习工程目录）[三]

    查看生成的my-project的工程目录 首先看 build是最终发布的代码存放位置. 我查看了一下目录,里面都是Js文件 config目录里面主要是配置目录,包括端口号.如果开的项目多,可以进入in ...

  10. Linux：打印（输出）所有的列（awk, $0）

    如果想输出所有的列的话,只需要$0这个函数,例如以下命令: awk '/rs16945916/ {print $0}' test.txt > allcol.txt rs16945916指的是打印 ...