JQuery AJAX

最新推荐文章于 2024-03-02 11:21:12 发布

weixin_44781936

最新推荐文章于 2024-03-02 11:21:12 发布

阅读量77

点赞数

分类专栏：前端文章标签：知识点

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery AJAX

1、jquery AJAX说明
2、AJAX与传统开发模式的区别
3、AJAX作用
4、使用JQuery AJAX发送数据
5、创建接口

1、jquery AJAX说明

Jquery其实就是一个JavaScript的类库，它将复杂的功能做了上层封装，使得开发者更容
易使用，，从而提高了开发效率
Jquery Ajax本质是 XMLHttpRequest 或 ActiveXObject

2、AJAX与传统开发模式的区别

ajax开发模式：页面将用户通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，
然后ajax将护具插入指定位置
传统的开发模式：用户的每次操作都触发一次返回服务器的HTTP请求，服务器做出处理后，
返回一个html页面给客户

3、AJAX作用

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML (异步的 javaScript 和 XML)
AJAX 不是新的编程语言，而是一种使用现有标准的新方法

4、使用JQuery AJAX发送数据

# 类视图函数

from django.shortcuts import render, HttpResponse
from django.views import View
import json

class Login(View):
	def get(self, request):
        return render(request, 'login.html')
	def post(self, request):
        print(request.POST)
        ret = {'code': True, 'data': None}
        return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type='application/json')

// login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<form id='add_form'>
        <input type='text' name='user' placeholder='用户名'>
        <input tupe='password' name='pwd' placeholder='密码'>
        <span id='jquery_ajax'>JQuery Ajax提交</span>
    </form>
    <script src='/static/jquery-1.12.4.js'></script>
    <script>
        $('#jquery_ajax').click(function(){
            $.ajax({
                url: '/login/',
                // data: {'user': 123, 'host_list': [1,2,3,4]},		//也可以传数据给后台
                data: $('#add_form').serialize(),	//拿到form表单提交的所有内容
                type: 'POST',				
                dataType: 'JSON',	//让Jquery将data先JSON后再发送给后台
                traditional: true,	//如果发送的是列表告诉JQuery也发送到后台
                
                success: function(data, statusText, xmlHttpRequest){
                    if(data.code == true){
                        console.log('返回登录后的页面')；
                    }else{
                        console.log('在页面上添加错误提示信息')；
                    }
                }，
                error: function(){
                	//只有当发送数据，后台没有捕捉到的未知错误才执行error函数 
            	}
            })
        })；
    </script>
</body>
</html>

5、创建接口

my_serializers.py创建目录

# 序列化字段设置
from rest_framework import serializers
from app01 import models


class GoodsModelSerializer(serializers.ModelSerializer ):
    """序列类-> Goods表"""
    class Meta:
        # 指定 要服务的表格
        model = models.Goods
        # 指定 要序列化哪些字段
        # fields = ('name',)
        # 序列化表中所有字段
        fields = '__all__'

class Goods(View):
    """商品信息"""
    def get(self, request):
        # 手动将数据库中的数据转成json格式
        goods_list = models.Goods.objects.all()
        goods = []
        for temp in goods_list:
            goods.append({
                'id': temp.id,
                'name': temp.name,
            })
        data = {
            'code': 200,
            'message': goods,
        }
        return HttpResponse(json.dumps(data, ensure_ascii=False), content_type='application/json')

        # rest framework 序列化表中的字段，自动生成 json
        goods_list = models.Goods.objects.all()
        # 实例化
        s = my_serializers.GoodsModelSerializer(goods_list, many=True)
        data = {
            'code': 200,
            'message': s.data,
        }
        return JsonResponse(data, safe=False)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="one">
    +
    <input type="text" id="two">
    =
    <input type="text" id="result">
    <button onclick="jisuan()">计算</button>
    <hr>

    <div id="tb">
        <button onclick="func()">添加数据</button>
    </div>
</body>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
    function jisuan() {
    	# 获取form表单字段中的 value 值
        var one = $('#one').val();
        var two = $('#two').val();
        # 为form 表单字段的 value 重新赋值
        var result = parseInt(one) + parseInt(two);
        $('#result').val(result);
    }
    function func() {
        $.ajax({
        	// 接口路由
            url: 'http://127.0.0.1:8000/goods/',
            // 请求方式
            type: 'get',
            // 成功触发函数，函数参数就是，从接口获取的数据集
            success: function (response) {
                console.log(response);
                if (response.code == 200)
                {
                    var content = '<table border="1">';
                    content += '<tr><td>ID</td><td>商品名称</td></tr>';
                    // 遍历数据集取到单条数据，进行字符串拼接html展示数据
                    for (var i = 0; i<response.message.length; i++)
                    {
                        var temp = response.message[i];
                        content += '<tr>' +
                            '<td>'+temp.id+'</td>' +
                            '<td>'+temp.name+'</td>' +
                            '</tr>'
                    }
                    content += '</table>';
                    $('#tb').append(content)
                }
                else if (response.code == 201)
                {
                    $('#tb').append('业务异常，没有获取到数据')
                }
                else if (response.code == 501)
                {
                    $('#tb').append('未知错误')
                }
            },
            //只有当发送数据，后台没有捕捉到的未知错误才执行error函数 
            errors: function (error) {
                console.log(error)
            }
        })
    }
</script>
</html>

weixin_44781936

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery AJAX

JQuery AJAX1、jquery AJAX说明2、AJAX与传统开发模式的区别3、AJAX作用4、使用JQuery AJAX发送数据5、创建接口1、jquery AJAX说明Jquery其实就是一个JavaScript的类库，它将复杂的功能做了上层封装，使得开发者更容易使用，，从而提高了开发效率Jquery Ajax本质是 XMLHttpRequest 或 ActiveXObjec...
复制链接

扫一扫

专栏目录