python40-ajax请求实例

最新推荐文章于 2022-01-26 19:30:22 发布
最新推荐文章于 2022-01-26 19:30:22 发布
阅读量154 收藏
点赞数
文章标签： json python
原文链接：https://juejin.im/post/5abb4ea7f265da238b7e1036
版权

1.配置静态变量

STATICFILES_DIRS=(
    os.path.join(BASE_DIR,'static'),
)
复制代码

2.url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('students/', views.students),
    path('add_student/', views.add_student),
    path('del_student/', views.del_student),
    path('edit_student/', views.edit_student),
]
复制代码

3.表结构

from django.db import models
from django.db import models

class Classes(models.Model):
    """
    班级表,男
    """
    title = models.CharField(max_length=32)
    m = models.ManyToManyField("Teachers")

class Teachers(models.Model):
    """
    老师表，女
    """
    name = models.CharField (max_length=32)

class Student(models.Model):
    username = models.CharField(max_length=32)
    age = models.IntegerField()
    gender = models.BooleanField()
    cs = models.ForeignKey(Classes,on_delete=models.CASCADE,)
复制代码

4.views.py

from django.shortcuts import render,HttpResponse
from app01 import  models
import json
# Create your views here.
def students(req):
    cls_list=models.Classes.objects.all()
    stu_list=models.Student.objects.all()
    # models.Student.objects.create(username="峰峰",age=15,gender=True,cs_id=3)
    # models.Student.objects.create(username="小明",age=19,gender=False,cs_id=2)
    # models.Student.objects.create(username="蓉蓉",age=22,gender=True,cs_id=1)
    return render(req,"students.html",{"stu_list":stu_list,"cls_list":cls_list})
def add_student(req):
    response={"status":True,"message":None,'data':None}
    try:
        print(req.POST)
        u = req.POST.get('username')
        a = req.POST.get('age')
        g = req.POST.get('gender')
        c = req.POST.get('cls_id')
        obj=models.Student.objects.create(
            username=u,
            age=a,
            gender=g,
            cs_id=c
        )
        response["data"]=obj.id
    except Exception as e:
        response["status"]=False
        response["message"]="用户输入错误"

    reuslt=json.dumps(response,ensure_ascii=False)
    return HttpResponse(reuslt)

def del_student(req):
    ret={'status':True}
    try:
        nid=req.GET.get("nid")
        models.Student.objects.filter(id=nid).delete();
    except Exception as e:
        ret['status']=False
    return HttpResponse(json.dumps(ret))
def edit_student(req):
    response={'code':1000,'message':None}
    try:
        nid= req.POST.get('nid')
        user=req.POST.get('user')
        age=req.POST.get('age')
        gender=req.POST.get('gender')
        cls_id=req.POST.get('cls_id')
        models.Student.objects.filter(id=nid).update(
            username=user,
            age=age,
            gender=gender,
            cs_id=cls_id
        )
    except Exception as e:
        response['code']=1001
        response['message']=str(e)
    return HttpResponse(json.dumps(response))
复制代码

5.student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>students</title>
    {#   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">#}
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css">
    <style>
        .icon {
            padding: 0 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="padding: 20px 0px">
        <a class="btn btn-primary" id="addBtn">添加</a>
        <a class="btn btn-danger">删除</a>
    </div>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">

            {% for row in stu_list %}
                <tr nid="{{ row.id }}">
                    <td na="nid">{{ row.id }}</td>
                    <td na="user">{{ row.username }}</td>
                    <td na="age">{{ row.age }}</td>
                    <td na="gender">{{ row.gender }}
{#                        {% if row.gender %}#}
{#                            男#}
{#                        {% else %}#}
{#                            女#}
{#                        {% endif %}#}
                    </td>
                    <td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
                    <td>
                        <a class="glyphicon glyphicon-remove icon delrow"></a>
                        <a class="fa fa-pencil-square-o icon editrow"></a>
                    </td>
                </tr>
            {% endfor %}


            </tbody>
        </table>
    </div>

</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建学生</h4>
            </div>
            <div class="modal-body">

                <form id="fm" class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {% for row in cls_list %}
                                    <option value="{{ row.id }}">{{ row.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color: red"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnSave">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger" role="alert">
            <h3>删除学生信息?</h3>
            <div>...<input style="display: none;" type="text" id="delNid"/></div>
            <div>
                <button id="cancelConfirm" type="button" class="btn btn-default">取消</button>
                <button id="delConfirm" type="button" class="btn btn-danger">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑学生</h4>
            </div>
            <div class="modal-body">

                <form id="fm" class="form-horizontal">
                    <input type="text" name="nid" style="display: none">

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="user" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {% for row in cls_list %}
                                    <option value="{{ row.id }}">{{ row.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color: red"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnEditSave">保存</button>
            </div>
        </div>
    </div>
</div>


<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<script>
    $(function () {
        bindEvent();
        bindSave();
        bindDel();
        bindDeldelConfirm();
        bindcancelConfirm();

        bindEdit();
        bindEditConfirm();


    });
    function bindEditConfirm(){
        var postData={};
        $("#btnEditSave").click(function(){
            $("#editModal").find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr("name");
                if (n == "gender") {
                    if ($(this).prop("checked")) {
                        postData[n] = v;
                    }
                } else {
                    postData[n] = v;
                }

            });
            console.log(postData);
            $.ajax({
                url:'/edit_student/',
                type:'POST',
                data:postData,
                dataType:'JSON',
                success:function(arg){
                    if(arg.code==1000){
                        window.location.reload();
                    }else{
                        alert(arg.message);
                    }
                }
            })
        })
    }
    //编辑绑定事件
    function bindEdit(){
        $('#tb').on('click','.editrow',function(){
            $('#editModal').modal('show');
            //获取当前行的数据
            //将数据赋值到对应的对话框的指定位置

            $(this).parent().prevAll().each(function(){
                var v =$(this).text();
                var n = $(this).attr('na');

                if(n=='cls_id'){
                    var cid=$(this).attr('cid');
                    $('#editModal select[name="cls_id"]').val(cid);
                } else if(n=='gender'){
                    // v=True
                    if(v=='True'){
                        $('#editModal :radio[value="1"]').prop('checked',true);
                    }else{

                        $('#editModal :radio[value="0"]').prop('checked',true);
                    }
                } else{

                    $("#editModal input[name='"+n+"']").val(v);
                }
            })


        })
    }
    function bindcancelConfirm(){
        $('#cancelConfirm').click(function(){
            $('#delModal').modal('hide');
        })
    }
    function bindDeldelConfirm(){
        $('#delConfirm').click(function(){
            var rowId=$('#delNid').val();
            $.ajax({
                url:'/del_student/',
                type:'GET',
                data:{'nid':rowId},
                success:function(arg){
                    var dict=JSON.parse(arg);
                    if(dict.status){
                        $('tr[nid="'+rowId+'"]').remove();
                    }
                    $('#delModal').modal('hide');
                }
            })
        })
    }
    /*
        事件委托........
     */
    function bindDel(){
        $('#tb').on('click','.delrow',function(){
            $('#delModal').modal('show');
            //获取当前行的id
            var rowId=$(this).parent().parent().attr("nid");
            //
            $('#delNid').val(rowId);
        })
    }

    function bindEvent() {
        $('#addBtn').click(function () {
            $('#addModal').modal('show');
        })
    }

    function bindSave() {
        var postData = {};
        $("#btnSave").click(function () {
            $("#addModal").find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr("name");
                if (n == "gender") {
                    if ($(this).prop("checked")) {
                        postData[n] = v;
                    }
                } else {
                    postData[n] = v;
                }

            });
            {#console.log(postData);#}
            $.ajax({
                url: '/add_student/',
                type: 'POST',
                data: postData,
                success: function (arg) {
                    //arg是字符串
                    //转为字典对象
                    var dict = JSON.parse(arg);
                    //将字典对象转为字符串
                    {#var str_dict=JSON.stringify(dict);#}
                    if (dict.status) {
                        /*
                        postData = {
                            username:'fengfeng',
                            age:18,
                            gender:1
                            cls_id:2
                        }
                        自增id
                        dict.data
                         */

                        createRow(postData,dict.data);
                        $('#addModal').modal('hide');
                        {#window.location.reload();#}
                    } else {
                        $("#errorMsg").text(dict.message);
                    }
                }
            })
        })

    }
    //通过生成的方式
    function createRow(postData,nid){
        var tr=document.createElement('tr');
        $(tr).attr('nid',nid);

        var tdid=document.createElement('td');
        tdid.innerHTML=nid;
        $(tr).append(tdid);

        var tdUser=document.createElement('td');
        tdUser.innerHTML=postData.username;
        $(tr).append(tdUser);

        var tdAge=document.createElement('td');
        tdAge.innerHTML=postData.age;
        $(tr).append(tdAge);

        var tdGender=document.createElement('td');
        if(postData.gender =="0"){
            tdGender.innerHTML="女";
        } else{
            tdGender.innerHTML="男";
        }
        $(tr).append(tdGender);

         var tdClass=document.createElement('td');
         var text =$('select[name="cls_id"]').find('option[value="'+postData.cls_id+'"]').text();
         tdClass.innerHTML=text;
         $(tr).append(tdClass);

         var tdHandle='<td>\n' +
             '                        <a class="glyphicon glyphicon-remove icon delrow"></a>\n' +
             '                        <a class="fa fa-pencil-square-o icon editrow"></a>\n' +
             '                    </td>';
         $(tr).append(tdHandle);



         $('#tb').append(tr);

    }



</script>

</body>
</html>
复制代码

注意

(1) ajax中的参数 traditional，当数据中value为数组,需要设置这个参数. 用传统的方式来序列化数据，那么就设置为true。 (2) ajax中的dataType参数可以设置为JSON.此时直接返回的数据为对象。

运行结果

weixin_34345560
关注
python发起ajax请求_python--Ajax
weixin_39883440的博客
11-30 743
我们在用requests抓取页面的时候，得到的结果可能和在浏览器中看到的不一样，是因为requests抓取的都是原始的HTML文档，而浏览器中的页面则是经过JavaScript处理数据后生成的结果，这些数据都来源有多种可能是通过Ajax加载的，可能是包含在HTML文档中的，也可能是经过JavaScript和特定算法计算后生成的。对于第一种情况，数据加载是一种异步加载方式，原始的页面最初不会包含某些...
python爬虫-----Ajax/selenium爬虫
weixin_44568633的博客
04-23 681
文章目录Ajax/selenium爬虫一、为什么用Ajax二、什么是Ajax三、Ajax怎么分析页面四、基于Ajax和requests采集器的微博爬虫五、基于selenium实现爬虫 Ajax/selenium爬虫 一、为什么用Ajax 1. 浏览器中可看到正常显示的数据，但使用requests得到的结果并没有。 这是什么原因呢? requests获取的是原始的HTML文档，而浏览器中的页面是经过...
python+MySQL+bootstrap+ajax实例项目
05-08
一个小型的用户管理系统，适合初学者参考使用，代码绝对好用，如有疑问可联系qq956701085
python简单实用案例_Ajax的简单实用实例代码
weixin_30682635的博客
02-04 220
细说SSO单点登录(转)OAuth2.0:https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-security.html#boot-features-security-oauth2-resource-serverhttp...文章developerguy2016-07-131080浏览量怎样在不使...
python ajax 实例,使用AJAX和Django获取数据的方法实例
weixin_39696197的博客
08-05 286
前言使用Django服务网页时，只要用户执行导致页面更改的操作，即使该更改仅影响页面的一小部分，它都会将完整的HTML模板传递给浏览器。 但是如果我们只想更新页面的一部分，则不必完全重新渲染页面-我们可以使用AJAX代替。AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。 现代JavaScript包含fetch API，该API为我们提供了一种...
Python Ajax爬虫案例
gezongbo的博客
01-26 2752
抓取街拍图片数据1. 抓取街拍图片2. 分析街拍图片结构3. 按功能不同编写不同方法组织代码3.1 获取网页json格式数据3.2 从json格式数据提取街拍图片3.3 将街拍图片以其md5码命名并保存图片3.4 main()调用其他函数4 抓取20page今日头条街拍图片数据参考链接 1. 抓取街拍图片 街拍图片网址 2. 分析街拍图片结构 keyword: 街拍 pd: atlas dvpf: pc aid: 4916 page_num: 1 search_json: {"from_search_
Python 之Ajax
shengerjianku的专栏
08-03 219
转自：http://www.cnblogs.com/python-study/p/6060530.html Python 之Ajax 1.使用Ajax在后台传递参数的示例 　　要使用Ajax传递参数，需要使用jquery，使用jquery需要注意以下几点。 　　1.建立static的目录，将jquery导入 　　 　　2.在项目s13day18_django的settings配置中，指定jquery的目录，同时注释掉CSRF STATIC_URL = '/static/' STATICFIL
Python项目-实例-26 爬取网易云音乐评论.zip
最新发布
07-26
这个Python项目实例主要聚焦于爬取网易云音乐的评论数据，通过编程实现对网络数据的抓取和处理。从给出的文件列表来看，我们可以推测这是一个包含多个音乐曲目的评论爬取示例，其中包括"Run Free (feat. IVIE)"、...
python爬虫 基于requests模块发起ajax的get请求实现解析
09-18
通过具体的实例，我们将探讨如何获取豆瓣电影分类排行榜中的电影详情数据，其中包括使用抓包工具分析AJAX请求、定制请求头信息、以及处理响应数据。 ### Python爬虫基础 Python爬虫是指使用Python语言编写的程序，...
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
12-31
本文实例讲述了Python基于分析Ajax请求实现抓取今日头条街拍图集功能。分享给大家供大家参考，具体如下： 代码: import os import re import json import time from hashlib import md5 from multiprocessing ...
简单Ajax实例(带前后台交互)
06-08
附件为Ajax的几个实例，在JSP页面中实现,实现了前后端交互。
JS+Python（ajax+json）例子
weixin_33743248的博客
06-02 920
提供基于js与python利用ajax传输json数据的部分示例：在static文件js目录下:jquery.js st_goods.jsHTML页面：<!DOCTYPEhtml> {%loadstaticfiles%} <html> <head> <metacharset="utf-8"> ...
python ajax mysql_python查询mysql,返回json的实例
weixin_28685287的博客
03-01 123
如下所示：import MySQLdbimport jsondef getSql():try:con = MySQLdb.connect(host='localhost', user='', passwd='', db='test', charset='utf8')cursor = con.cursor()sql = "select * from user"cursor.execute(sql)r...
原生AJAX的生成示例
python -学习笔记
11-06 278
一.AJAX简介 1. AJAX的使用场合 1.搜索的建议 2.表单验证 3.前后端完全分离 2.XMLHttpRequest 简称是'xhr'，称为'异步对象'，代替浏览器向服务器发送请求并接收响应。 二.创建原生AJAX 1.创建异步对象（xhr） 主流的异步对象是XMLHttoReque...
【Python Web】Ajax 使用详解
风口IT猪的成长录
12-29 3047
Ajaxajax1. ajax的介绍2. ajax的使用3. 小结 ajax 1. ajax的介绍 ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以 让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是 实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住， 当前端页面想和后台服务器进行数据交互就可以使用ajax了。 这里
CSS基础知识总结之css样式引用的三种方式
weixin_33735077的博客
04-01 287
在html中增加css样式有三种： 1.在标签中增加style属性： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title...
Python Web 实现Ajax调用
roodyszz2013的博客
01-07 9986
Html前端： $.ajax({ type:"GET", url:'/getmobile', data:'id='+id, dataType:"json", success:function(dat
Python爬虫教程-17-ajax爬取实例（豆瓣电影）
热门推荐
肖朋伟
08-26 1万+
Python爬虫教程-17-ajax爬取实例（豆瓣电影） ajax： 简单的说，就是一段js代码，通过这段代码，可以让页面发送异步的请求，或者向服务器发送一个东西，即和服务器进行交互 对于ajax： 1.一定会有 url，请求方法(get, post)，可能有数据 2.一般使用 json 格式 爬取豆瓣电影 网站分析： 打开豆瓣电影网站：https://movie.douba...
Python3网络爬虫实战——Ajax数据爬取！
Pythoncxy的博客
06-21 5165
有时候我们在用 Requests 抓取页面的时候，得到的结果可能和在浏览器中看到的是不一样的，在浏览器中可以看到正常显示的页面数据，但是使用 Requests 得到的结果并没有，这其中的原因是 Requests 获取的都是原始的 HTML 文档，而浏览器中的页面则是页面又经过 JavaScript 处理数据后生成的结果，这些数据的来源有多种，可能是通过 Ajax 加载的，可能是包含在了 HTML ...
python接受JQuery-Ajax post()请求
05-24
在这个示例中，我们创建了一个名为 app 的 Flask 实例，并定义了一个 /post 的路由，该路由只接受 POST 请求。当有 POST 请求到达时，Flask 将自动解析请求体中的 JSON 数据，并将其作为 python 字典类型存储在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值