Django框架學習筆記（27.Ajax簡單操作）

阿新 • • 發佈：2019-01-12

原生Ajax:

urls.py:

url(r'^ajax/$', views.ajax),
url(r'^ajax_json/$', views.ajax_json),

views.py:

def ajax(request):
    return render(request, 'ajax.html')

def ajax_json(request):
    ret = {
        'status': True,
'data': None,
}
    import json
    return HttpResponse(json.dumps(ret))

ajax.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();"/>
<script>
function Ajax1(){
        var xhr = new XMLHttpRequest();
 
xhr.open('GET', '/ajax_json/', true);
xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                //4表示接收完畢
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
        };
xhr.setRequestHeader('k1', 'v1');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8' 
);
xhr.send('name=root;pwd=123');
}
</script>
</body>
</html>

偽ajax:

先了解下iframe標籤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="url"/><input type="button" value="傳送iframe請求" onclick="iframeRequest();"/>
<iframe id="ifm" src="http://www.baidu.com"></iframe>
<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function iframeRequest(){
        var url = $('#url').val();
$('#ifm').attr('src', url);
}

</script>
</body>
</html>

利用iframe的特性偽造ajax：

<form action="/ajax_json/" method="POST" target="ifm1">
{% csrf_token %}
    <iframe name="ifm1"></iframe>
    <input type="text" name="username"/>
    <input type="text" name="email"/>
    <input type="submit" value="提交"/>
</form>

獲取內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/ajax_json/" method="POST" target="ifm1">
{% csrf_token %}
    <iframe id="ifm1" name="ifm1"></iframe>
    <input type="text" name="username"/>
    <input type="text" name="email"/>
    <input type="submit" value="提交" onclick="submitForm();"/>
</form>
<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function submitForm(){
        $('#ifm1').load(function(){
            var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
        })
    }
</script>
</body>
</html>

Django框架學習筆記（27.Ajax簡單操作）

原生Ajax: urls.py: url(r'^ajax/$', views.ajax), url(r'^ajax_json/$', views.ajax_json), views.py: de

Django框架學習筆記（9.ORM基本操作）

app下的models.py: from django.db import models # Create your models here. class UserInfo(models.Mode

Django框架學習筆記（25.Form元件驗證）

簡單的使用者註冊： urls.py加入： url(r'^fm/$', views.fm), views.py: from django import forms class FM(forms.

Django框架學習筆記（22.CSRF原理簡單介紹）

前面我們寫Django的時候，都要在settings.py裡把CSRF註釋掉，這裡其實是Django提供的一層防護，防止提交的資料含有XSS攻擊，只有請求裡面含有CSRF令牌（隨機字串）才可以通過，否

Django框架學習筆記（4.簡單的總結）

這裡對前面三節的知識做個簡單的總結：一、基本操作： 1.建立Django工程： django-admin startproject [工程名] 2.建立app： cd [工程名] python manage.py startapp [app名稱]

Django框架學習筆記（16.利用ajax實現簡易的驗證）

繼續上一篇的例子： host.html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset=

Django框架學習筆記（21.Session例項）

基於Cookie做使用者驗證時：不適合把敏感資訊（如密碼）放在Cookie中，因為可以Cookie是可以看見的。 Cookie優勢：減輕了服務端的壓力接下來介紹Session: Cooki

Django框架學習筆記（28.檔案上傳詳解）

1.所有美觀的上傳按鈕原理： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

Django框架學習筆記（14.一對多跨表操作）

繼續上次的Django工程，在資料庫中加入一些資料：在views.py加入： def host(request): v1 = models.Host.objects.filter(nid_

Django框架學習筆記（19.自定義分頁）

在講自定義分頁之前，先講一個簡單的。在模板語言中還有一些特殊的存在，比如這個： def tpl4(request): name = "asdf123456" return render(request, 'tpl4.html', {'name': name})

Django框架學習筆記（15.增加一對多資料簡易示例）

在上一篇建立好的Django工程的基礎上： urls.py: from django.contrib import admin from django.urls import path from django.conf.urls import url from app01

php laravel框架學習筆記（二）數據庫操作

true 數據 mar sql show top 一行 ati del 原博客鏈接：http://www.cnblogs.com/bitch1319453/p/6810492.html mysql基本配置你可用通過配置環境變量，使用cmd進入mysql，當然還有一種東

Spring框架學習筆記（二）

約束存在基礎核心但是註解文件的分享 strong 上接Spring框架學習筆記（一） IOC和DI區別（1）IOC: 控制反轉，把對象創建交給spring進行配置（2）DI: 依賴註入，向類裏面的屬性中設置值（3）關系：依賴註入不能單獨存在，需要在i

Spring框架學習筆記（四）

兩個低版本事務管理器對象關系多行通配符表單 spring整合 val 上接Spring框架學習筆記（三）聲明式事務管理（xml配置） 1 配置文件方式使用aop思想配置第一步配置事務管理器第二步配置事務增強第三步配置切面聲明式事務

TensorFlow+實戰Google深度學習框架學習筆記（12）------Mnist識別和卷積神經網路LeNet

一、卷積神經網路的簡述卷積神經網路將一個影象變窄變長。原本【長和寬較大，高較小】變成【長和寬較小，高增加】卷積過程需要用到卷積核【二維的滑動視窗】【過濾器】，每個卷積核由n*m（長*寬）個小格組成，每個小格都有自己的權重值，長寬變窄：過濾器的長寬決定的高度變高：過濾器的個數決定的 &nb

TensorFlow+實戰Google深度學習框架學習筆記（13）------Mnist識別和卷積神經網路AlexNet

一、AlexNet：共8層：5個卷積層（卷積+池化）、3個全連線層，輸出到softmax層，產生分類。論文中lrn層推薦的引數：depth_radius = 4，bias = 1.0 , alpha = 0.001 / 9.0 , beta = 0.75 lrn現在僅在AlexNet中使用，

TensorFlow+實戰Google深度學習框架學習筆記（13）------Mnist識別和卷積神經網絡AlexNet

net dev adding 筆記 learn 明顯 lex test info 一、AlexNet：共8層：5個卷積層（卷積+池化）、3個全連接層，輸出到softmax層，產生分類。論文中lrn層推薦的參數：depth_radius = 4，bias = 1.0 ,

TensorFlow+實戰Google深度學習框架學習筆記（14）------VGGNet

一、VGGNet：5段卷積【每段有2~3個卷積層+最大池化層】【每段過濾器個數：64-128-256-512-512】每段的2~3個卷積層串聯在一起的作用： 2個3×3的卷積層串聯的效果相當於一個5×5的卷積層，即一個畫素會跟周圍5×5的畫素產生關聯。【28*28的輸入經過一次5*5得到24*24，s=

框架《React》庫的學習筆記（從5到8）

五. 模組與元件的理解六. react元件的基本定義和使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

springmvc學習筆記（27）——initBinder註解

怎麼使用initBinder註解在控制層加入以下程式碼即可 @InitBinder public void initBinder(WebDataBinder binder){

Django框架學習筆記（27.Ajax簡單操作）

相關推薦