CODEWITHSUNDEEP
jqueryjsondjango
Diogo Silva
Diogo Silva

Reputation: 195

how to deserialize data from jquery/ajax in django view

I want to deserialize the this data

csrfmiddlewaretoken=5U9Fgv8Gdmft6wU1zwPJlRxwIsXHaElfvKTtqkT2HtzWc6uNqFq1AeogAOkIjWb5&title=jstree+inline+HTML+demo&ubc=1&company-name=teste&company-cnpj=222.222.222-22&company-email=teste%40gmail.com

but when I try json.loads(data) or data.json()

I get this error

raise JSONDecodeError("Expecting value", s, err.value) from None json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

$('#documet').ready(function(){                        
        $('#project_form_id').on('submit', function(event){
            var csrfToken = 
$('input[name="csrfmiddlewaretoken"]').val();

            event.preventDefault()
            var form = $(this)                                       

            $.ajax({
                url: "{% url 'project_create' %}",
                data: {'form':form.serialize(), 'areas':JSON.stringify(list_area)},
                type: form.attr("method"),
                dataType: 'json',
                headers: {'X-CSRFToken': '{{ csrf_token }}'},    
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",    
                success: function(data){

                    console.log(data.areas)
                    console.log(data.project)

                },
                error:function(error){
                    console.log(error)
                    //$("#modal-book .modal-content").html(data.html_form);

                }
            });



        })
    })

Upvotes: 0

Views: 1437

Answers (1)

thebjorn
thebjorn

Reputation: 27351

This should get you closer to where you want to be..

        $.ajax({
            url: "{% url 'project_create' %}",
            data: JSON.stringify(form.serializeArray()),
            type: 'POST',
            dataType: 'json',
            headers: {'X-CSRFToken': '{{ csrf_token }}'},    
            contentType: 'application/json; charset=utf-8',

You can look at the difference using the following (mostly stolen from the jQuery serializeArray docs):

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<form>
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>

<script>
$('form').on('submit', function (e) {
    e.preventDefault();
    var form = $(this)                                       
    console.log($(this).serialize());
    console.log($(this).serializeArray());
    return false;
});
</script>

</body>
</html>

Upvotes: 4

Related Questions