序列化表单并向函数发布ajax

Serialzing form and posting ajax to function

本文关键字：ajax 函数 表单 序列化      更新时间：2023-09-26

我正试图将表单字段值传递给位于文件中的php函数。问题是，我不明白如何将序列化的表单数据从ajax传递到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)*/ ;
        }
    });
});

这个ajax将值传递给了文件ajax.php。来自ajax.php的函数被称为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'
                                    )
                           );
}

函数.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)";
}

问题是serialize()生成一个URL编码的键值配对字符串，因此不能将其与数据对象混合。

您可以使用serializeArray()来获得表示表单元素的对象数组，然后对它们进行迭代并将它们添加到数据对象中：

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)*/ ;
    }
});

附带说明：您的PHP代码容易受到SQL注入的攻击。考虑使用Prepared语句，而不是将用户输入连接到SQL中。

您可以像现在这样通过ajax将序列化数据传递给函数，但您的代码需要稍作修改。

$('#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)*/ ;
        }
    });
});

我认为你可以使用像这样的

第一：在表单上添加隐藏的操作输入

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

然后你的ajax帖子像这个

$('#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)*/ ;
        }
    });
});

然后在ajax.php 上使用print_r

print_r($_POST);

$('#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)*/ ;
                }
        });
});

这对我来说很好：-）

相关文章：