Ajax query filter for entries

Question

I'm attempting to set up ajax filtering for entries using jquery. I'm setting variables in my js based on form field values. The js is triggerd when there's a change in a form field and then the ajax query is fired.

$('#speciesID, #sex, #site, #ageGroup').change(
    function(){
        var speciesVal = $('#speciesID').val();
        var sexVal = $('#sex').val();
        var locationVal = $('#location').val();
        var ageVal = $('#ageGroup').val();

        /* make the ajax call with .ajax */
        $.ajax({
            type: 'get',
            url: '/our-services/adopt',
            data: {species: speciesVal, sex: sexVal, location: locationVal, age: ageVal},
            processData: true,
            success: function(result){$( ".petSearchResult" ).html( result ).show();}
        })
});

I'm having two issues with this approach. 1) The filtering doesn't work; the query returns all entries, regardless of filter data values. 2) The query returns only the entry titles as HTML. When I set the the ajax datatype to 'json' the query returns nothing. I've looked over a number of SE threads related to using ajax to query entries but so far have not been able to piece together a solution.

Here's the base Twig template:

{#
Template: adopt
#}
{% extends craft.app.request.isAjax ? "includes/_petSearch" : "_layout" %}
{% block content %}
<form id="adoptablePets">
    <div>
        <label for="speciesID">SPECIES</label><br>
        <select class="frmInput" name="speciesID" id="speciesID">
            <option value="">All</option>
            <option value="Dog">Dog</option>
            <option value="Cat">Cat</option>
            <option value="Rabbit">Rabbit</option>
            <option value="Horse">Horse</option>
            <option value="Small&amp;Furry">Small&amp;Furry</option>
            <option value="Pig">Pig</option>
            <option value="Reptile">Reptile</option>
            <option value="Bird">Bird</option>
            <option value="Barnyard">Barnyard</option>
            <option value="Other than Dog and Cat">Other than Dog and Cat</option>
        </select>
    </div>
    <div>
        <label for="sex">SEX</label><br>
        <select class="frmInput" name="sex" id="sex">
            <option value="">All</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
    <div>
        <label for="age">AGE</label><br>
        <select class="frmInput" name="age" id="age">
            <option value="">All</option>
            <option value="Over 1 year old">Over 1 year old</option>
            <option value="Under 1 year old">Under 1 year old</option>
        </select>
    </div>
    <div>
        <label for="location">LOCATION</label><br>
        <select class="frmInput" name="location" id="location">
            <option value="" selected="selected">All</option>
            <option value="Adoption Center West">Adoption Center West</option>
            {#<option value="com">Animals in the Community</option>#}
        </select>
    </div>
</form>
{# petSearch non-ajax results #}
{% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}
    {% for entry in entries %}
        <div>
            <p>{{ entry.title }}</p>
            <p>{{ entry.petName }}</p>
            <p> {{ entry.sex }}</p>
            <p>{{ entry.species }}</p>
        </div>
    {% endfor %}
{# petSearch ajax results #}
    {% block ajaxContent %}
        <div class="petSearchResult"></div>
    {% endblock %}
{% endblock %}

And the ajax template with the block to update:

{#
template: _petSearch
#}

{% block ajaxContent %}
<h1>false</h1>
{% endblock %}

Answer 1

You need to fetch your URL parameters via

{% set location = craft.app.getRequest().getQueryParam('location') %}

you can then include the parameter to your Query

{% set entries = craft.entries
    .section( 'adoptablePetSearch' )
    .location(location)
    .all() 
%}