Tengo un formulario con una cierta cantidad de campos y uso una llamada ajax para comunicarme con el servidor. Y me preguntaba cuál es la mejor manera de pasar los datos que obtengo de request.post del formulario y devolverlos a la propiedad de éxito de javascript de ajax.
Aquí hay un ejemplo:
def ajaxView(request): form = MyForm(request.POST or None) if request.is_ajax() and form.is_valid(): #1 I used to use render_to_string and Parse it in the js #2 or get field by field using the request.POST.get method and return it #3 is to serialize the form return JsonResponse({}) return ""En el archivo js:
function CreateAjax(e) { e.preventDefault(); $.ajax({ url: "/ajaxViewUrl/", type: "post", data: $("#idForm").serialize(), success: function (data) { // if the first option retreive fields by field after parse }, error: () => { } });}
Ahora bien, esto no sería un problema si el formulario tiene una pequeña cantidad de campos, mi preocupación es cuando el formulario tiene una cantidad considerable de campos y, en cualquier caso, me gustaría reducir la repetición de obtener el valor de las entradas en el formulario.
Algo a tener en cuenta es cuando se devuelve el formulario como un html cortado a un modal.
Vistas.py
@require_http_methods(["POST"]) def login(request): form = BasicLogInForm(request.POST) if form.is_valid(): print "ITS VALID GO SOMEWHERE" pass return render(request, 'assess-beta/login-beta.html', {'loginform':form})Vista simple para devolver el html cortado
Formulario html cortado
<form class="login-form" action="/login_ajx" method="Post"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="header">Authenticate</h4> </div> <div class="modal-body"> {%if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{%endif%} <div class="fieldWrapper form-group has-feedback"> <label class="control-label" for="id_email">Email</label> <input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}"> {%if form.email.errors %}<div class="alert alert-danger">{{ form.email.errors }}</div>{%endif%} </div> <div class="fieldWrapper form-group has-feedback"> <label class="control-label" for="id_password">Password</label> <input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}"> {%if form.password.errors %}<div class="alert alert-danger">{{ form.password.errors }}</div>{%endif%} </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <input type="submit" value="Sign in" class="btn btn-primary pull-right"/> </div> </form>Página que contiene el modal
{% include "evaluar-beta/login-beta.html" %}Use la etiqueta de inclusión para cargar el recorte en la carga de la página para que esté disponible cuando abra el modal.
Modal.js
$(document).on('submit', '.login-form', function(){ $.ajax({ type: $(this).attr('method'), url: this.action, data: $(this).serialize(), context: this, success: function(data, status) { $('#LoginModal').html(data); } }); return false; });El uso de .on() en este caso funciona como .live(), ya que la clave vincula el evento de envío no al botón sino al documento.