Django - peticion ajax

tengo un proyecto django donde tengo 2 modelos:
en el formulario de la vista del modelo2 (el html) estoy usando un campo desabilitado donde tengo que hacer una peticion ajax para ver si existe dicho nombre, para mostrar del campo -> nombre del modelo1, cuando busco en internet las peticiones no veo que hacen referencias hacia otros modelos, estoy usando adminLTE por si sirve de algo.

Habria que ver como estas haciendo la peticion Ajax. Lo que sé es que el trabajo de buscar, seleccionar o extraer informacion se hace en el backend, es decir django, y de alli envia la respuesta en JSON

Los modelos estan en el backend, es decir django, y ajax trabaja solamente en el front.
la peticion ajax la hace invocando a una ruta que va al backend y alli hace trabajar una funcion o vista que devuelve el JSON

`requirement.txt
asgiref==3.8.1
backports.zoneinfo==0.2.1
beautifulsoup4==4.12.3
Django==3.2.25
django-bootstrap-v5==1.0.11
django-cors-headers==4.3.1
django-widget-tweaks==1.5.0

psycopg2==2.9.9
pytz==2024.1
soupsieve==2.5
sqlparse==0.5.0
typing_extensions==4.11.0
tzdata==2024.1


--------config settings.py add-----------------

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'dbname',
'USER': 'postgresuser',
'PASSWORD':'admin',
'HOST': 'localhost',
'DATABASE_PORT': '5432'
}
}

STATICFILES_DIR = (os.path.join(BASE_DIR, 'practicas/static'),)



url----------------
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('App.urls'))
]

shortcuts---------------------------------
from django.shortcuts import render,redirect,get_object_or_404, HttpResponse
from django.contrib import messages
from django.http import JsonResponse, Http404
from .models import model1
from django.core import serializers
from django.core.paginator import Paginator


methods orm---------------------------------

model.objects.all()/.values()/filter/select_related('camp_fk')

crud helps-------------------------------
data recovery , request.POST.get('state') == 'on'
create without model.form , model= model(camp1,camp2...)
model.save()

delete , get_object_or_404(Model, pk=id)


edit. mymodel= get_object_or_404(Model, pk=id)

data = {
'name': cerveza.name,
'state': cerveza.state,
}


-------------------save model.form--------------------------

def cerveza2edit(request, id):
cerveza = get_object_or_404(Cerveza, pk=id)

if request.method == 'POST':
updateCerveza = CervezaForm(request.POST, instance=cerveza)
if updateCerveza.is_valid():
updateCerveza.save()
return redirect('/cerveza2/')
form = CervezaForm(instance=cerveza)

# Renderizar el template con el formulario
return render(request, 'cerveza2edit.html', {'form': form})


--------------model.forms----------------
from django import forms
from django.core.validators import MinLengthValidator
from django.core.validators import RegexValidator

from cervezaApp.models import Cerveza

class CervezaForm(forms.ModelForm):
class Meta:
model = Cerveza
fields= [
'nombre',
'estado',
'marca'
]
labels ={
'nombre': 'nombre',
'estado': 'estado',
'marca':'marca'
}
widgets = {
# 'nombre' : forms.CharField(max_length=50,label='nombre',required=True ,validators=[RegexValidator(r'^[a-zA-Z\s]*$','Solo se permiten letras en este campo.'),MinLengthValidator(3,'Minimo 3 letras')], error_messages={'required': 'Este campo es requerido'}),
# 'estado': forms.CheckboxInput(attrs={'class': ''}),
'nombre': forms.TextInput(attrs={'class': 'form-control', 'placeholder':'nombre'}),
'estado': forms.CheckboxInput(attrs={'class': 'form-control', 'placeholder':'nombre'}),
'marca': forms.Select(attrs={'class': ''}),
}

def clean_nombre(self):
nombre = self.cleaned_data['nombre']
nombreAlredyExist= Cerveza.objects.filter(nombre= nombre)
if (nombreAlredyExist):
raise forms.ValidationError('Ya existe un registro con ese nombre')
return nombre








paginator template ---------------------
{% if paginator.num_pages > 1 %}
<div class="d-flex justify-content-center">
<ul class="pagination">
{% if entity.has_previous %}
<li class="page-item d-none d-sm-block"><a class="page-link"
href="?page={{ entity.previous_page_number }}#pagtable">Anterior</a></li>
{% endif %}

{% for page in paginator.page_range %}
{% if page == 1 or page == paginator.num_pages or page >= entity.number|add:-3 and page <= entity.number|add:3 %}
<li class="page-item {% if page == entity.number %}active{% endif %}">
<a class="page-link" href="?page={{ page }}#pagtable">{{ page }}</a>
</li>
{% elif page == entity.number|add:-4 or page == entity.number|add:4 %}
<li class="page-item">
<a class="page-link" href="#">...</a>
</li>
{% endif %}
{% endfor %}

{% if entity.has_next %}
<li class="page-item d-none d-sm-block">
<a class="page-link" href="?page={{ entity.next_page_number }}#pagtable">Siguiente</a>
</li>
{% endif %}
</ul>
</div>

<div class="d-flex justify-content-center d-sm-none">
{% if entity.has_previous %}
<span class="page-item"><a class="page-link"
href="?page={{ entity.previous_page_number }}#pagtable">Anterior</a></span>
{% endif %}
{% if entity.has_next %}
<span class="page-item"><a class="page-link" href="?page={{ entity.next_page_number }}#pagtable">Siguiente</a></span>
{% endif %}
<br>
<br>
</div>
{% endif %}


agg in base.html ---------------
{% include 'paginator.html' %}


important---------------------------
user : {% for cerveza in entity %} for render data in your html

view.py for pagination implement in your method controller ------------------
List = model.objects.all()
page = request.GET.get('page', 1)
paginator = Paginator(cervezaList, 2)
cervezaList = paginator.page(page)

data = {
'entity': cervezaList,
'paginator': paginator
}
return render(request, 'index.html', data)


json rest api-------------------
obj = model.objects.all().values()
listRes = list(obj)
if obj:
return JsonResponse(listRes ,safe=False)
else:
return HttpResponse('empty')



jquery--------------------------------------
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>



ajax ------------------------------------------

<script>

$(document).ready(function () {

$.ajax({
url: 'http://127.0.0.1:8000/marcas/',
type: 'GET',
dataType: 'json',
success: function (data) {
console.log(data)

$.each(data, function (index,marca) {
$('#selectMarca').append($('<option>', {
value: marca.id,
text: marca.nombre
}));
});
},
error: function (xhr, status, error) {
console.error('Error :', error);
}
});
});
</script>




jqruy select2 =-------------------------------------------------
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />



forms.model------------------------------------------
from django import forms
from django.core.validators import MinLengthValidator
from django.core.validators import RegexValidator

from cervezaApp.models import Cerveza

class CervezaForm(forms.ModelForm):
class Meta:
model = Cerveza
fields= [
'nombre',
'estado',
'marca'
]
labels ={
'nombre': 'nombre',
'estado': 'estado',
'marca':'marca'
}
widgets = {
# 'nombre' : forms.CharField(max_length=50,label='nombre',required=True ,validators=[RegexValidator(r'^[a-zA-Z\s]*$','Solo se permiten letras en este campo.'),MinLengthValidator(3,'Minimo 3 letras')], error_messages={'required': 'Este campo es requerido'}),
# 'estado': forms.CheckboxInput(attrs={'class': ''}),
'nombre': forms.TextInput(attrs={'class': 'form-control', 'placeholder':'nombre'}),
'estado': forms.CheckboxInput(attrs={'class': 'form-control', 'placeholder':'nombre'}),
'marca': forms.Select(attrs={'class': ''}),
}
def clean_nombre(self):
nombre = self.cleaned_data['nombre']
nombreAlredyExist= Cerveza.objects.afirst(nombre= nombre)
if (nombreAlredyExist):
raise forms.ValidationError('Ya existe un registro con ese nombre')
return nombre


select2 example--------------------------------

<script type="text/javascript">
$(document).ready(function () {
$('#selectMarca').select2({
ajax: {
url: 'http://127.0.0.1:8000/marcas/', // URL de la vista que proporciona los datos
dataType: 'json',
delay: 300,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data) {
return {
results: $.map( data , function (i ) {
return {
id: i.id,
text: i.nombre
};
})
};
},
cache: true
},
// placeholder: 'Selecciona una marca',
});
$('#selectMarca').val('2')
});
$('#selectMarca').val('2')
</script>



restframework===================================
from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ('id', 'title', 'description','done')
# fields = '__all__' serializar y coger todos los campos


view.py
''''''''''''''''''''''''''''''''''''''


from django.shortcuts import render
from rest_framework import viewsets
from api.models import Task
from api.serializer import TaskSerializer

# Create your views here.
class TaskController(viewsets.ModelViewSet):
serializer_class = TaskSerializer
queryset = Task.objects.all()

react---------------------------------------------------

api
import axios from "axios"

const api = axios.create({
baseURL:'http://127.0.0.1:8000/tasks/'
})
export const getAllTask=()=>{return api.get('/')}
export const getTask=(id)=>{return api.get('/'+id)}
export const createTask=(task)=>{api.post('/',task)}
export const deleteTask=(id)=>{api.delete('/'+ id)}
export const putTask=(id,task)=>{api.put('/'+ id + '/', task)}

app.jsx
import { BrowserRouter,Routes,Route,Navigate } from 'react-router-dom'
import React from 'react'
import TaskPage from './pages/TaskPage'
import TaskForm from './pages/TaskForm'
import Navigation from './components/Navigation'
import {Toaster} from 'react-hot-toast'







<BrowserRouter>
<Navigation/>
<Routes>
<Route path="/" element={<Navigate to="/tasks"/>}/>
<Route path="/tasks" element={<TaskPage/>}/>
<Route path="/create" element={<TaskForm/>}/>
<Route path="/tasks/:id" element={<TaskForm/>}/>

</Routes>
<Toaster/>
</BrowserRouter>















-crud

import React from 'react'
import { Link } from 'react-router-dom'

const Navigation = () => {
return (
<div>
<Link to="/">Inicio</Link>
<span></span>
<Link to="/create">crear</Link>
</div>
)
}

export default Navigation



import React from 'react'
import { getAllTask } from '../api/task.api'
import { useEffect,useState } from 'react'
import TaskCard from './TaskCard'

const TaskList = () => {

const [tasks, setTask]= useState([])

useEffect(()=>{
async function loadTaskList() {
const res = await getAllTask()
console.log(res)
setTask(res.data)
}
loadTaskList()
}, [])


return (
<div>

{tasks.map( (task) =>
<TaskCard key={task.id} task={task}/>
)
}
</div>


)
}

export default TaskList














import React from 'react'
import { useNavigate } from 'react-router-dom'
const TaskCard = ({task}) => {
const navigate = useNavigate()
return (
<div style={{ background: '#181520'}}

onClick={() =>{
navigate('/tasks/'+ task.id)
}}

>
<h1>{task.title}</h1>
<p>{task.description}</p>
<hr />
</div>
)
}
export default TaskCard



packages---------------------------------------------
+-- @types/[email protected]
+-- @types/[email protected]
+-- @vitejs/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]





as......................................................................hf`