Django ajax error

问题

I am getting an error while using AJAX to populate a table inside my django template. I am not sure what the error is, please help me in resolving this issue. I have shared all the important files, if I remove ajax and redirect the url to the destination URL then the code works fine, but somehow the ajax implementation is throwing an error.

Exception happened during processing of request from ('127.0.0.1', 64879)
Traceback (most recent call last):
  File "c:\Python27\Lib\SocketServer.py", line 593, in process_request_thread
    self.finish_request(request, client_address)
  File "c:\Python27\Lib\SocketServer.py", line 334, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "c:\Users\mayayadav\djcode\mysite\venv\lib\site-packages\django\core\serv
ers\basehttp.py", line 150, in __init__
    super(WSGIRequestHandler, self).__init__(*args, **kwargs)
  File "c:\Python27\Lib\SocketServer.py", line 651, in __init__
    self.finish()
  File "c:\Python27\Lib\SocketServer.py", line 710, in finish
    self.wfile.close()
  File "c:\Python27\Lib\socket.py", line 279, in close
    self.flush()
  File "c:\Python27\Lib\socket.py", line 303, in flush
    self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 10053] An established connection was aborted by the software in yo
ur host machine

Views.py

def SearchTrips(request):
    city=request.POST['city'].replace(" ","%20")
    location=request.POST['location'].replace(" ","%20")
    duration=request.POST['duration']
    print city
    print location
    url="http://blankket-mk8te7kbzv.elasticbeanstalk.com/getroutes?city="+city+"&location="+location+"&duration="+duration
    print url
    x=urllib2.urlopen(url)
    datas=json.load(x)          
    return render(request,'searchtrips.html',{'datas':datas})

Ajax.js

$(function(){

        $("#routes").submit(function() {

             $.ajax({
                    type: "POST",
                    url: '/searchtrips/',
                    data: {
                    'city' : $('#city').val(),
                    'location' : $('#location').val(),
                    'duration' : $('#duration').val(),
                    'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value
                    },                    
                success:searchSuccess,
                datatype: 'html'
                });
    });
});

function searchSuccess(data, textStatus, jqXHR)
{
    $('#routeTable').html(data);
};

searchtrips.html

                    {% for data in datas %}
            <tr>
                            <td>{{ data.score}}</td>
                            {%for element in data.place.elements%}
                            <td>{{element.placeName}} </td>
                            {% endfor %}
            </tr>
                    {% endfor %}

htmlfile

    <form class="form-search"  action ="" id="routes" method="post" name="routes" align="center">
........................

{% csrf_token %}
<button type="submit" class=""> <i class="icon-search icon-white"></i> Search </button>

</form>

<table class="table table-hover" id="routeTable" style="display:none">
    <thead>
        <tr>

Score Cost Itinerary

回答1:

I think the problem is in return function. When you use an ajax you must not return it in render.

if request.is_ajax():
    return HttpResponse(datas, mimetype="application/javascript")
else:
    return render(request,'searchtrips.html',{'datas':datas})

回答2:

The error means that your view is hanged or throwing exception.

First in you ajax, you should prevent it submit several times:

$("#routes").submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: '/searchtrips/',
        datatype: 'html',
        data: {
            'city' : $('#city').val(),
            'location' : $('#location').val(),
            'duration' : $('#duration').val(),
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },                    
        success: function (resp) {
            console.log('Success');
            $('#routeTable').html(resp);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('Error');
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});

Next in your view, you might want to catch exception if there is any:

def SearchTrips(request):
    city = request.POST['city'].replace(" ","%20")
    location = request.POST['location'].replace(" ","%20")
    duration = request.POST['duration']
    url = "http://blankket-mk8te7kbzv.elasticbeanstalk.com/getroutes?city=%s&location=%s&duration=%s" % (city, location, duration)

    try:
        resp = urllib2.urlopen(url)
    except:
        resp = None

    if resp:
        datas = json.load(resp)
    else:
        datas = None

    return render(request, 'searchtrips.html', {'datas': datas})

Also make sure that you read PEP 8 since your code styling and naming convention is quite bad.

Hope it helps.

回答3:

Here is my new ajax.js code(just to close this thread and for anyones future reference)

$(function(){

    $('#searchtest').click(function() {

        $.ajax({
            type: "POST",
            url: "/searchtrips/",
            data: {
                'city' : $('#city').val(),
                'location' : $('#location').val(),
                'duration' : $('#duration').val(),
                'search_text' : $('#searchtest').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: searchSuccess,
            dataType: 'html'
        });

    });

});

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
}

来源：https://stackoverflow.com/questions/18040898/django-ajax-error