Ajax Form和Django集成发布错误

时间:2017-03-27 09:54:03

标签: javascript jquery python ajax django

我正在尝试将表单中的数据存储到我的数据库中,我正在使用Django-Python作为后端。

这是我的HTML表单

<form>
<center>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-5" style="background-color:white;">
                <p>First name:<br></p>
            </div>
            <div class="col-sm-6" style="background-color:white;">
                <p><input type="text" id="firstname"><br></p>
            </div>
            <div class="col-sm-5" style="background-color:white;">
                 <p>Last name:<br></p>
            </div>
            <div class="col-sm-6" style="background-color:white;">
                <p><input type="text" id="lastname"><br></p>
            </div>
            <div class="col-sm-5" style="background-color:white;">
                <p>Email ID:<br></p>
            </div>
            <div class="col-sm-6" style="background-color:white;">
                <p><input type="text" id="email"><br></p>
            </div>
            <div class="col-sm-5" style="background-color:white;">
                <p>Delivery Address:<br></p>
            </div>
            <div class="col-sm-6" style="background-color:white;">
                <p><input type="text" id="address"><br></p>
            </div>
            <div class="col-sm-5" style="background-color:white;">
                <p>Contact Number:<br></p>
            </div>
            <div class="col-sm-6" style="background-color:white;">
                <p><input type="number" id="number"><br></p>
            </div>
        </div>
    </div>
</center>
            <h1>&nbsp;</h1>
                <p>"Payment mode:- Cash On Delivery,</p>
                <p>All payment have to be done to the delivery boy by cash."</p><br>
            <center> 
                <button onclick = "submitform()" class="button" style="background-color:black;color:#ffcb04;padding:5px 10px 5px 10px;border-radius: 10px">Submit</button>
            </center>
</form>

这是我的javascript / Jquery / Ajax

function submitform(){
firstname = $("#firstname").val()
lastname = $("#lastname").val()
email = $("#email").val()
address = $("#address").val()
number = $("#number").val()
string = {
    'firstname' :firstname,
    'lastname' : lastname,
    'email' : email,
    'address' : address,
    'number' : number
}
json_string = JSON.stringify(string);
    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        url: '/orders/store-order-details/',
        data: json_string,
        success: function(data) {
                window.location.href = "/confirmation/";
                }
});
}

这是我的Django views.py

def store_order_details(request):
received_json_data = json.loads(request.body)
customer_obj = Customer(first_name=received_json_data['first_name'], last_name=received_json_data['last_name'],
                    email_ID=received_json_data['email_id'], contact_number=received_json_data['number'],
                    address=received_json_data['address'])
print(customer_obj)
customer_obj.save()
print(received_json_data['data'])
return Response(status.HTTP_201_CREATED)

我无法弄清楚这个中的错误,因为我觉得这在表面上是正常的。

问题是数据没有存储在数据库中。我不确定数据是否由Ajax发布。我觉得视图中的Python代码很好。但是我怀疑json.loads是否会起作用。

我在终端

中收到此错误

&#34; POST / orders / store-order-details / HTTP / 1.1&#34; 403 2274

使用网址参数测试视图时

我收到此错误

JSON对象必须是str,而不是&#39; bytes&#39;

所有表单输入都是字母数字

1 个答案:

答案 0 :(得分:1)

该错误与您的任何代码无关。控制台显示您有403响应,这是一个禁止代码;这是因为Django保护POST请求免受跨站点脚本攻击。

请参阅the CSRF documentation了解该怎么做。