避免在发布请求中重定向

Question

I'm trying to display a contents of a JSON that I receive from the backend onto the frontend without redirecting to a new page.

I want to avoid redirecting in this POST request, but it automatically goes to the URL search_results/ and prints out the json. How can I avoid this?

It does, however, print out on the console "Success in redirect post" before redirecting.

        $(document).ready(function () {
            $.extend(
            {
                redirectPost: function(location, args)
                {
                    var form = $('<form></form>');
                    form.attr("method", "post");
                    form.attr("action", location);

                    $.each( args, function( key, value ) {
                        var field = $('<input></input>');

                        field.attr("type", "hidden");
                        field.attr("name", key);
                        field.attr("value", value);

                        form.append(field);
                    });
                    $(form).appendTo('body').submit();
                }
            });

            $("#submitButton").click(function() {
                console.log("submitButton clicked")

                $("#search_form").submit(function(e) {
                    e.preventDefault();

                    $.redirectPost("./search_results/", {

                            inheritance: $("input[name=inheritance]:checked").attr("id"),
                            penetrance: $("input[name=penetrance]:checked").attr("id"),
                            mortality: $("input[name=mortality]:checked").attr("id"),

                            success: function(response){
                                console.log("Success in redirect post!")

                                var json_results_list = response.body.results_list

                            }


                    });

                });
            });
        });

My backend code looks something like this:

app.post('/search_results', callName)


function callName(request, response) {
//...insert serverside code..
//...set global_data to a JSON in string form
response.send(JSON.parse(global_data))
}

Answer 1

So basically what you want is called ajax. You don't need to create the redirectPost method which will make a invisible form and them submit it. Just use $.post instead.

$.post("./search_results/", {
    inheritance: $("input[name=inheritance]:checked").attr("id"),
    penetrance: $("input[name=penetrance]:checked").attr("id"),
    mortality: $("input[name=mortality]:checked").attr("id")
}, function (response) {
    console.log("Success in redirect post!")
    var json_results_list = response.body.results_list

});

You can check more examples here