时间戳

首页 > 解决方案 > 如何在 AJAX 中使用 POST 请求从 Django 表单发送特定数据？

python - 如何在 AJAX 中使用 POST 请求从 Django 表单发送特定数据？

问题描述

所以我目前正在处理包含两个提交按钮的 Django 项目。表单包含 3 个字段（联系电话、联系人姓名、消息）和两个按钮（搜索、发送）。单击发送按钮后，我只想发送带有 ajax 发布请求的contact_number 字段和消息字段。但它使用 ajax 请求发送所有字段。您能帮我如何使用 ajax 发布请求发送特定的字段数据吗？

形成图像 在此处输入图像描述

ajax 脚本 ，而 ajax 请求我只在数据中添加 3 个字段，但我在我的帖子请求中获得了所有字段。

var KTLoginGeneral = function () {

    // var success= $('#success');
    // var error = $('#fail');
    var handleSignInFormSubmit = function () {
            $('#send_msg_submit').click(function (e) {
                e.preventDefault();
                var btn = $(this);
                var form = $(this).closest('form');
                console.log("send submit");
                form.validate({
                    rules: {
                        number: {
                            required: true,
                        },
                        message: {
                            required: true
                        }
                    }
                });
                if (!form.valid()) {
                    return;
                }
                btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
                form.ajaxSubmit({
                    type: 'POST',
                    url: 'msg/single',
                    data: {
                        number: $('#number').val(),
                         message: $('#message').val(),
                        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function (response, status, xhr, $form) {
                        // similate 2s dela
                        console.log(response);
                        var result = response['success'];

                        if (result) {
                            btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            error.hide();
                            success.show();
                            success.text(response['error_msg']);
                            $('#message_form').resetForm();
                        } else {
                            console.log("else error");
                            success.hide();
                            error.show();
                            error.text(response['error_msg']);
                            setTimeout(function () {
                                btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            }, 2000);
                        }
                    },
                    error(response, e) {
                        btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                        console.log("error");
                        success.hide();
                        error.show();
                    }
                });
            });

            $('#search').click(function (e) {
                e.preventDefault();
                var btn = $('#search');
                var form = $(this).closest('form');
                var search_name = $('#search_name');

                form.validate({
                    rules: {
                        search_name: {
                            required: true,
                        },
                    }
                });
                if (!form.valid()) {
                    return;
                }
                btn.addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', true);
                form.ajaxSubmit({
                    type: 'POST',
                    url: 'msg/single',
                    data: {
                        search_name: search_name.val(),
                        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function (response, status, xhr, $form) {
                        console.log(response);
                        var result = response['success'];

                        if (result) {
                            btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                             $('#kt_modal_1').on('show.bs.modal', function (event) {
                                  var button = $(event.relatedTarget);// Button that triggered the modal
                                  var recipient = button.data('whatever');// Extract info from data-* attributes
                                  var modal = $(this);
                                  modal.find('.modal-title').text('Search Result');
                                  modal.find('.modal-body input').val(recipient)

                                });
                        } else {
                            console.log("else error");
                            success.hide();
                            error.show();
                            error.text(response['error_msg']);
                            setTimeout(function () {
                                btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                            }, 2000);
                        }
                    },
                    error(response, e) {
                        console.log("error");
                        success.hide();
                        error.show();
                        btn.removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light').attr('disabled', false);
                    }
                });
            });
 };

    // Public Functions
    return {
        // public functions
        init: function () {
            handleSignInFormSubmit();
        }
    };
}();
// Class Initialization
jQuery(document).ready(function () {
    KTLoginGeneral.init();
});

但是当我在我的视图中打印发布请求时，它包含所有数据

<QueryDict: {'csrfmiddlewaretoken': ['EvwkSZPrJYPTHDqKKG0jpfGq98FjIGsM6P83BQ9MGDOxvf0psum1VBZ3IU71XRwh'], 'number': ['8264056065'], 'search_name': [''], 'message': ['hello']}>

预期产出

<QueryDict {'csrfmiddlewaretoken': ['EvwkSZPrJYPTHDqKKG0jpfGq98FjIGsM6P83BQ9MGDOxvf0psum1VBZ3IU71XRwh'], 'number': ['8264056065'], 'message': ['hello']}>

但我的帖子请求中不需要 search_name。

标签： pythondjangoajaxpostdjango-forms

解决方案

request.POST 用于表单编码的内容。对于 JSON，您应该直接访问普通正文：

json_object = json.loads(request.body)`

推荐阅读