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. Cenos7 添加service,开机启动

    本地有一个 data-service.jar 1. 编写启动脚本  data-service-start [root@iz2ze0fq2isg8vphkpos5sz shell]# more data ...

  2. iTunes 12.7 没有应用程序选项了,重新安装iTunes 12.6.3

    iTunes 12.6.3 下载地址: Mac http://t.cn/RO5rIfE Win 32 http://t.cn/ROtta1T Win64 http://t.cn/ROtta1n 安装好 ...

  3. docker--命令详解

    查看版本: docker --version 查看docker信息: docker info 进入容器: docker exec -it bb /bin/bash #在容器中执行一个bash可以操作容 ...

  4. HDU-1686-KMP-水题

    纯KMP #include <cstdio> #include <algorithm> #include <cstring> #include <ctype. ...

  5. Java监听器Listener的使用详解

    监听器用于监听Web应用中某些对象的创建.销毁.增加,修改,删除等动作的发生,然后作出相应的响应处理.当监听范围的对象的状态发生变化的时候,服务器自动调用监听器对象中的方法.常用于统计网站在线人数.系 ...

  6. python 和 scikit-learn 实现垃圾邮件过滤

    文本挖掘(Text Mining,从文字中获取信息)是一个比较宽泛的概念,这一技术在如今每天都有海量文本数据生成的时代越来越受到关注.目前,在机器学习模型的帮助下,包括情绪分析,文件分类,话题分类,文 ...

  7. 【CF809E】Surprise me!（动态规划，虚树，莫比乌斯反演）

    [CF809E]Surprise me!(动态规划,虚树,莫比乌斯反演) 题面 洛谷 CodeForces 翻译: 给定一棵\(n\)个节点的树,每个点有一个权值\(a[i]\),保证\(a[i]\) ...

  8. 洛谷 P4074 [WC2013]糖果公园 解题报告

    P4074 [WC2013]糖果公园 糖果公园 树上待修莫队 注意一个思想,dfn序处理链的方法,必须可以根据类似异或的东西,然后根据lca分两种情况讨论 注意细节 Code: #include &l ...

  9. 拆分string 用空格 逗号

    string that have both comma and space struct tokens: std::ctype<char>{ tokens(): std::ctype< ...

  10. dijkstra 的优先队列优化

    既然要学习算法,就要学习到它的精髓,才能够使用起来得心应手. 我还是远远不够啊. 早就知道,dijkstra 算法可以用优先队列优化,我却一直不知道该怎样优化.当时,我的思路是这样的:假设有n个顶点, ...