Sending serialized data plus additional data with Ajax

Question

I'm trying to send serialized data with ajax post and some additional data. I tried the following way:

$("#prw").on('click', function(e){

    var url = window.location.origin + "/newsletter/preview";

    var title = $('#title').val();
    var intro = $('#intro').val();
    var array = table.$('input[type="checkbox"], input[type="text"]').serialize() + "&title=" + title + "&intro=" + intro;

    $.ajax({
        type: "POST",
        url: url,
        data: array
    }).done(function(data){
        console.log("Response", data);
    });

    e.preventDefault();
});

But it only shows checkbox and text, not title and intro in the response. I have also tried this method:

$("#prw").on('click', function(e){

    var url = window.location.origin + "/newsletter/preview";

    var title = $('#title').val();
    var intro = $('#intro').val();
    var array = table.$('input[type="checkbox"], input[type="text"]').serializeArray();
    array.push({name: 'title', value: title});
    array.push({name: 'intro', value: intro});    

    $.ajax({
        type: "POST",
        url: url,
        data: array
    }).done(function(data){
        console.log("Response", data);
    });

    e.preventDefault();
});

It doesn't work either. This url goes to CodeIgniter controller:

function preview() {
    $post = $this->input->post();
    print_r($_POST);
    return $post;
}

You want to add the data as a JSON object in your request body. The syntax you are currently using is something you would use in a GET request in the request header. Check out http://stackoverflow.com/questions/10214723/jquery-ajax-post-data for an example of how to do an ajax POST. — seN, Jul 07 '16 at 15:18
I saw that link so I tried to do it in a similar way, but it doesn't work — Gogo, Jul 07 '16 at 15:21
Also: use the debugger features of your web browser to **LQQK AT** what is actually being sent and received. Don't just look at your program's view of it: look at the actual data stream. — Mike Robinson, Jul 07 '16 at 15:21
Debugger only shows serialized checkboxes and text, and not showing title and intro in the console — Gogo, Jul 07 '16 at 15:22

score 0 · Answer 1 · answered Jul 07 '16 at 15:28

0

It's much more easy to create an object:

var url = window.location.origin + "/newsletter/preview";
var data = { title: $('#title').val() , intro : $('#intro').val() };
// I don't know what you table is.. 
// if you tell me the plugin I can help sending that that either

$.ajax({
    type: "POST",
    url: url,
    data: $.param(data)
}).done(function(data){
    console.log("Response", data);
});

answered Jul 07 '16 at 15:28

Luís Soares

5,726
4
39
66

It is DataTables plugin – Gogo Jul 08 '16 at 07:49

score 0 · Answer 2 · answered Jul 07 '16 at 15:30

0

First of all, be aware that the answer may vary depending on what the API endpoint is expecting. Can you show us the controller / method you are trying to reach?

That being said, I would guess that the endpoint expects a JSON object (probably stringified).

With those assumptions, try the following:

$("#prw").on('click', function(e){

var url = window.location.origin + "/newsletter/preview";

var title = $('#title').val();
var intro = $('#intro').val();
// That table reference is a bit unclear to me, is this a 3rd party library?
var checkbox = false; // Grab your checkbox value here
var inputVal = null; // Grab your input value here

var data = { 
title: title,
intro: intro,
checkbox: checkbox,
inputVal: inputVal 
};

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    contentType: 'application/json'
}).done(function(data){
    console.log("Response", data);
});

e.preventDefault();

});

answered Jul 07 '16 at 15:30

seN

1,045
14
21

table is a DataTable library, now it shows empty array – Gogo Jul 07 '16 at 15:35
Okay. So your problem isn't related to the AJAX call, but about getting the data from your page? So $('#title").val(), does not return a value? – seN Jul 07 '16 at 15:37
Response data doesn't show title and intro. Input data is ok – Gogo Jul 08 '16 at 07:19
Does print_r($_POST); display the correct data? It be interesting to see a screenshot of Request and Response body. Also, you probably want to re phrase your question. It is very unclear to say the least. I am still not 100% sure what your actually problem is. – seN Jul 08 '16 at 15:57

Sending serialized data plus additional data with Ajax

2 Answers2