Estoy haciendo un proyecto en django que es una aplicación web de alquiler / venta de automóviles, la consulta de búsqueda funciona, pero cuando intento enviar mi formulario en ajax parece que nunca llega a ajax.

<div class="container">
    <div class="card-header bg-info text-white">
        <h4>
            <i class="fas fa-car"></i> Search Car </h4>
    </div>
    <form method="get" id="search-form">
        <div class="input-field">
            <label for="from">Number:</label>
            <input type="number" class="form-control" id="from-place" placeholder="Any" name="number" />
        </div>
        <section>
            <label for="class">Car Type:</label>
            <select class="cs-select cs-skin-border input-half">
                <option value="" disabled selected>Any</option>
                <option value="1">Sedan</option>
                <option value="2">Saloon</option>
            </select>
        </section>
        <section>
            <label for="class">Price:</label>
            <div class="wide">
                <select class="cs-select cs-select-half cs-skin-border input-half" name="price">
                    <option value="" disabled selected>any</option>
                    <option value="1000">1.000</option>
                    <option value="2000">2.000</option>
                    <option value="3000">3.000</option>
            </div>
        </section>
        <div class="col-xxs-12 col-xs-12 text-center">
            <input type="hidden" name="search_filter" value="true">
            <input type="submit" id="search-apa" value="Search">
        </div>
    </form>
</div>

Y este código ajax:

$(document).ready(function() {
    $('#search-form').on('submit', function(e) {
        e.preventDefault();
        var searchText = $('#search-form').val();
        $.ajax({
            url: '/cars/search_car/?search_filter=' + searchText,
                type: 'GET',
                success: function(resp) {
                var newHtml = resp.data.map(d => {
                    return `<div class="cars">
                        <a href="/cars/${d.id}">
                        <h4>${d.type}</h4>
                        <p>${d.price}</p>
                    </a>
                    </div>`
                });
                $('.cars-index').html(newHtml.join(''));
                $('.search-form').val( '');
            },
            error: function(xhr, ststus, error) {
                console.log(error);
            }
        })

    });
});

Estoy tratando de obtener los valores del formulario en ajax, pero cuando hago clic en buscar dice indefinido. Imprimí searchText y no imprimo nada, parece que nunca llega al ajax, ¿hay algún problema con mi formulario o no llamo correctamente en ajax? El error que muestra es

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
search_car.js:25 Internal Server Error
0
Sachihiro 9 may. 2019 a las 22:09

4 respuestas

La mejor respuesta

El $('#search-form') no tiene ningún valor, porque es un formulario. Necesita el valor de <input />. Si necesita enviar todos los datos del formulario, debe usar:

data: $('#search-form').serialize(),

En su llamada AJAX, cambie de esta manera:

$(document).ready(function() {
    $('#search-form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '/cars/search_car/?search_filter=' + searchText,
                type: 'GET',
                data: $('#search-form').serialize(),
                success: function(resp) {
                var newHtml = resp.data.map(d => {
                    return `<div class="cars">
                        <a href="/cars/${d.id}">
                        <h4>${d.type}</h4>
                        <p>${d.price}</p>
                    </a>
                    </div>`
                });
                $('.cars-index').html(newHtml.join(''));
                $('.search-form').val( '');
            },
            error: function(xhr, ststus, error) {
                console.log(error);
            }
        })

    });
});

Y asegúrese de tener el atributo name para todo y que también coincida en el backend.

0
Praveen Kumar Purushothaman 9 may. 2019 a las 19:13

Creo que lo que está mal con el código es esto var searchText = $('#search-form').val(); Debe obtener el valor de cada campo por su propio selector, no solo puede obtener todos los valores del formulario con el selector de formulario. Intente iniciar sesión en la consola searchText y vea si realmente tiene algún valor

0
Milan Kharal 9 may. 2019 a las 19:14

La línea

var searchText = $('#search-form').val();

Asigna searchText a un valor de cadena vacío. Lo que quieres es:

let formString = $("#search-form").serialize();
-1
Vadim Flaks 9 may. 2019 a las 19:37

Está accediendo al valor del formulario con. Función Val (). Lo cual es incorrecto Como el formulario contiene varios elementos secundarios, no le devolverá un valor. Si tiene que acceder al texto de búsqueda, debe ser un control de entrada como $ ('# from-place'). Val ().

0
200_OK 9 may. 2019 a las 19:25