Javascript 在Ajax中将序列化的Django模型实例转换回对象

我使用Ajax搜索模型实例，返回该实例，并将其作为变量传递给模板中的模板标记。在我看来，我在将对象发送到Ajax成功函数之前序列化了对象。但是，一旦我回到Ajax函数中，如何使它恢复为模型实例，以便在模板中使用它

template.html

        <div class="row">
            <div class="col-md-10 col-md-offset-1" style="border: 2px solid #e4e4e4; border-radius: 8px">
                <p class="text-center" style="color: #27AE60; padding: 20px 20px 0px 20px"><b>Generate the citation for a desired dataset by typing its ID number in the box below:</b></p>
                <form role="form" method="get" action="{% url 'databank:get_citation' %}" id="citation-form" style="padding: 0px 20px 20px 20px">
                  <div class="input-group">
                    <span class="input-group-addon" id="doi-prefix">11.23/</span>
                    <input type="Search" placeholder="Data ID" class="form-control form-search2" id="data-id" name="q">
                    <div class="input-group-btn">
                      <button class="btn blue-search-button">
                         <span>Go</span>
                      </button>
                    </div>
                  </div>
                </form>
                <div class="row">
                    <div class="col-md-10 col-md-offset-1" id="results">{{ errors }}</div>
                    <div class="col-md-10 col-md-offset-1" id="generatedCitation">
                        <p style='font-size: 20px'class="citationResults">{% include 'databank/includes/citation.html' with dataset=citationdataset registration=citationregistration %}</p>
                    </div>
                </div>
            </div>
        </div>

---

新工作，遵循@JulienGrégoire的建议后编写代码-

template.html：

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <p><b>Citation Generator</b></p>
            <form role="form" method="get" action="{% url 'databank:get_citation' %}" id="citation-form">
              <div class="input-group">
                <span class="input-group-addon" id="doi-prefix">11.0/</span>
                <input type="Search" placeholder="Data ID" class="form-control form-search2" id="data-id" name="q">
                <div class="input-group-btn">
                  <button class="btn blue-search-button">
                     <span>Get Citation</span>
                  </button>
                </div>
              </div>
            </form>
            <div class="row">
                <div class="col-md-10 col-md-offset-1" id="generatedCitation">
                    <p style='font-size: 20px' class="citationResults"></p>
                </div>
            </div>
        </div>
    </div>

---

模板是在服务器上呈现的，所以我不知道如何用javascript（客户端）呈现它

您可以做的是创建一个模板，该模板只处理要从视图中更新和发送呈现html的部分，并重新导入它

---

因此，在这里，您不用在视图中序列化，而是返回一个具有适当上下文和模板的呈现，并使用jquery html函数插入它和div，它应该可以工作。

谢谢@juliengregoire！我用新的工作代码更新了我的问题。

def get_citation(request):
    if request.method=='GET':
        dataset_id = request.GET.get('data_id')
        print "ID IS: ", dataset_id

        try:
            dataset = Dataset.objects.get(dataset_id=dataset_id)
            registration = Registration.objects.get(dataset=dataset)
            if dataset.status == 'public':
                print "PUBLIC: ", dataset, registration
                data_info = {}
                dataset = serializers.serialize('json', [ dataset, ])
                data_info['dataset'] = dataset
                registration = serializers.serialize('json', [ registration, ])
                data_info['registration'] =  registration
                return JsonResponse(data_info)

            else:
                return JsonResponse({"errors": "The dataset you requested has not yet been made public. Check back later."})

        except Dataset.DoesNotExist:
            return JsonResponse({"errors": "The dataset you requested could not be found. Make sure you are using the correct ID."})

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <p><b>Citation Generator</b></p>
            <form role="form" method="get" action="{% url 'databank:get_citation' %}" id="citation-form">
              <div class="input-group">
                <span class="input-group-addon" id="doi-prefix">11.0/</span>
                <input type="Search" placeholder="Data ID" class="form-control form-search2" id="data-id" name="q">
                <div class="input-group-btn">
                  <button class="btn blue-search-button">
                     <span>Get Citation</span>
                  </button>
                </div>
              </div>
            </form>
            <div class="row">
                <div class="col-md-10 col-md-offset-1" id="generatedCitation">
                    <p style='font-size: 20px' class="citationResults"></p>
                </div>
            </div>
        </div>
    </div>

$('#citation-form').on('submit', function(event){
    event.preventDefault();
    console.log("citation generator form submitted") 
    get_citation();
});

function get_citation(){
    console.log("citation generator is working!")
    $.ajax({
        url : "get_citation/", 
        type : "GET", 
        data : { data_id : $('#data-id').val() }, // data sent with the get request, the inputted data id

        // handle a successful response
        success : function(data) {
            $('#data-id').val(''); // remove the value from the input
            console.log(data); // log the returned json to the console
            $('.citationResults').html(data);
            console.log("success"); // another sanity check
        },

        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('.citationResults').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
};

def get_citation(request):
    if request.method=='GET':
        dataset_id = request.GET.get('data_id')

        try:
            dataset = Dataset.objects.get(dataset_id=dataset_id)
            registration = Registration.objects.get(dataset=dataset)
            if dataset.status == 'public':
                context = {'registration': registration, 'dataset': dataset}
                html = render_to_string('databank/includes/citation.html', context)
                return HttpResponse(html)

            else:
                context = {'message': "The dataset you requested has not yet been made public. Check back later."}
                html = render_to_string('databank/includes/no_citation.html', context)
                return HttpResponse(html)

        except Dataset.DoesNotExist:
            context = {'message': "The dataset you requested could not be found. Make sure you are using a valid ID."}
            html = render_to_string('databank/includes/no_citation.html', context)
            return HttpResponse(html)