如何通过 AJAX 中的 POST 请求从 Django 表单发送特定数据？

Question

So i am currently working on Django project that form contains two submit button. form contain 3 field(contact number, contact name, message) and two button(search, send). after send button click i just want to send contact_number field and message field with ajax post request. but it's send all field with ajax request. Can you help me how to send specific field data with ajax post request.

form image

ajax script while ajax request i only add 3 field in data but i got all field in my post request.

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();
});

but when i print post request in my view it contain all data

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

expected output

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

but i don't need search_name in my post request.

Answer 1

request.POST is for form-encoded content. For JSON, you should access the plain body directly:

json_object = json.loads(request.body)`