1.數據格式要求
合格的json對象：
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]
不合格的json對象：
name: "張三", 'age': 32 } // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進制值
{ "name": "張三", "age": undefined } // 不能使用undefined
{ "name": "張三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函數和日期對象
}
stringify與parse方法
JavaScript中關於JSON對象和字符串轉換的兩個方法：
JSON.parse(): 用於將一個 JSON 字符串轉換爲 JavaScript 對象
JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ; // 錯誤
JSON.parse('[18,undefined]') ; // 錯誤
JSON.stringify(): 用於將 JavaScript 值轉換爲 JSON 字符串。
JSON.stringify({"name":"Q1mi"})
2.模板
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}"></script>
<script type="text/javascript" src="{%static 'webpage/sweetalert/js/salert.min.js'%}"></script>
<link rel="stylesheet" type="text/css" href="{%static 'webpage/sweetalert/css/salert.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'webpage/font_awesome/css/font-awesome.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'webpage/bootstrap/css/bootstrap.css'%}">
<script type="text/javascript" src="{%static 'webpage/bootstrap/js/bootstrap.js'%}"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading"><h1>展示信息！！</h1></div>
<table class="table" >
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>地址</th>
<th>年齡</th>
<th>愛好</th>
<th>時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for mgs in student %}
<tr>
<td>{{mgs.id}}</td>
<td>{{mgs.name}}</td>
<td>{{mgs.adder}}</td>
<td>{{mgs.age}}</td>
<td>{{mgs.hobby}}</td>
<td>{{mgs.ctime}}</td>
<td>
<button class="btn btn-danger"><i class=" del fa fa-trash-o" >刪除</i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
{#https://sweetalert.js.org/docs/#}
$(".del").click(function () {
{#var v=$(the).parent().prevAll(); // prevAll() 方法返回被選元素之前的所有同級元素。 the 當前元素 的父元素 之前所以同級元#}
{# var c=$(v[0]).text(); // 獲取當前行值 姓名#}
var nid=$(this).parent().parent().children().eq(1).text();
swal({
title: "你確定要刪除嗎？",
text: "刪除可就找不回來了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "刪除",
cancelButtonText: "取消",
closeOnConfirm: false
{#向後端發送刪除請求#}
},function () {
$.ajax({
url:"/home/ajax_show/",
type: "post",
data:{"id":nid},
success:function (arg) {
console.log(arg)
var nid=$(this).parent().parent().children()
nid.remove();
},
})
})
})
</script>
</body>
</html>
3.後臺處理
from django.shortcuts import render,HttpResponse,render_to_response,redirect
import os
from django.conf import settings
from myapp import models
def ajax_show(request):
if request.method=="GET":
stu_list=models.Student.objects.all()
return render(request,"01html/04ajax_show.html",{"student":stu_list})
elif request.method == "POST":
nid=request.POST.get("nid")
models.Student.objects.filter(id=nid).delete()
return HttpResponse("刪除成功了哈哈哈哈")