序列化表格并将ajax发布到功能

Question

I am trying to pass the form field values to a php function located into a file. The problem is that I can't understand how to pass that serialized form data to the function from this ajax to a function in php.

$('#insert_news').submit(function(event) {
    event.preventDefault();
    var form = $('#insert_news').serialize();
    $.ajax({
        type: 'POST',
        url: 'includes/ajax.php',
        data: {
            action: 'insert_news',
            $('#insert_news').serialize(); // how do I add this data here?
        },
        success: function(datas) {
            $('#message').html(datas).show() /*fadeIn(1000).fadeOut(1000)*/ ;
        }
    });
});

This ajax passed the values to the file ajax.php right beyond. And from ajax.php is called the function located in functions.php.

ajax.php

if (isset($_POST['action']) && $_POST['action'] == 'insert_news') {
    $cp->insert_into_table('newss', array(
                                        'NewsTitle' => $_POST['title'], 
                                        'NewsDescrption' => $_POST['description'], 
                                        'Date' => date('Y-m-d H:i:s'), 
                                        'status' => '1'
                                    )
                           );
}

function.php

public function insert_into_table($table_name, array $data){
    foreach($data as $col=>$value) {
        $cols[] = $col;
        $values[] = '\''.$value.'\'';
    }
    $cols = implode(', ', $cols);
    $values = implode(', ', $values);
    $this->db->query("INSERT INTO $table_name ($cols) VALUES ($values)");
    echo "INSERT INTO $table_name ($cols) VALUES ($values)";
}

Answer 1

You can pass serialized data via ajax to a function the way you are doing but your code needs slight modification.

$('#insert_news').submit(function(event) {
    event.preventDefault();
    var form = $('#insert_news').serialize();
    $.ajax({
        type: 'POST',
        url: 'includes/ajax.php',
        data: {
            action: 'insert_news',

  serializedData: form // use variable to assign data here 

        },
        success: function(datas) {
            $('#message').html(datas).show() /*fadeIn(1000).fadeOut(1000)*/ ;
        }
    });
});

Answer 2

The issue is serialize() produces a URL encoded key value paired string, so you can't mix that with your data object.

You can use serializeArray() to get an array of objects, representing the form elements, then iterate over them and add them to a data object:

var data = { action: 'insert_news' };

$.each($('#insert_news').serializeArray(), function(){
    data[this.name] = this.value;
});

$.ajax({
    type: 'POST',
    url: 'includes/ajax.php',
    data: data,
    success: function(datas) {
        $('#message').html(datas).show() /*fadeIn(1000).fadeOut(1000)*/ ;
    }
});

---

Side note: your PHP code is vulnerable to SQL Injection. Consider using a Prepared Statement instead of concatenating user input into the SQL.

Answer 3

$('#insert_news').submit(function(event) {
    var name = $("#t1").val();
    var pass = $("#t2").val();  //add more var as u need
    var key  = 0;

     var formName = new FormData();

     formName.append(key++,name)
     formName.append(key++,pass)    //append the the var to formdata


        $.ajax({
            url         :   'includes/ajax.php',
            dataType    :   'text',
            cache       :   false,
            contentType :   false,
            processData :   false,
            data        :   formName,                                    
            type        :   'post',

            success     :   function(data){
                        $('#message').html(data).show() /*fadeIn(1000).fadeOut(1000)*/ ;
                }

        });
});

this works fine for me :-)

Answer 4

I think you can use alternate like this

First : add hidden input for action on your form

<input type="hidden" name="action" value="insert_news"/>

Then your ajax post like this

$('#insert_news').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'includes/ajax.php',
        data: $(this).serialize(), // $(this) is from <form id="insert_news">
        success: function(datas) {
            $('#message').html(datas).show() /*fadeIn(1000).fadeOut(1000)*/ ;
        }
    });
});

And then use print_r on your ajax.php

print_r($_POST);