使用ajax提交表单时无法从视图中获取控制器中的字段数据答案

【问题标题】：Cannot get field data in controller from view when submiting form using ajax使用ajax提交表单时无法从视图中获取控制器中的字段数据
【发布时间】：2015-10-21 06:16:20
【问题描述】：

我正在使用 codeigniter，但是当我使用 ajax 提交表单时，我无法将字段数据从视图获取到控制器。从过去的两天开始，我正在研究它，但找不到解决方案。当我打印字段值时，它显示为空白，即没有值。我只想用ajax提交数据，没有正常发帖。请帮助解决我的问题。

这是我的代码：

查看

$(document.body).on('click', '.postbtn' ,function(e){
    e.preventDefault();
    $('#posting_comment').submit();
});

<script type="text/javascript">
function sendCareerData()
{

    var fdata = new FormData(document.getElementById("posting_comment"));

    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url();?>"+"dashboard/do_upload",
        data: fdata,
        mimeType:"multipart/form-data", 
        contentType: 'text',
        cache: false,
        processData:false,
        dataType: 'html', 
        success: function (data) {
          alert("d"+data);
        },
            error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log( errorThrown );  
        }

    });

    return false;
}

</script>

<form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
</form>

控制器：

public function do_upload()
    {
$comment_topic=$_POST['comment_topic'];
$attachment_file=$_POST['attachment_file'];
$config['upload_path'] ='./uploads/';
$config['allowed_types'] = 'gif|jpg|png||jpeg';
$config['max_width'] = 1000;
$config['max_height'] = 1000;
$config['max_size'] = 20000000;
$config['encrypt_name'] = FALSE;
$this->load->library('upload', $config);
$this->upload->do_upload($file_names);
    }

$comment_topic 和 $attachment_file 都包含空白值。

【问题讨论】：

var_dump($_POST) 的输出是什么？
@Martin 我已经检查过这是 $_POST 的输出：- 'Array()1'
@Martin 它是空数组

标签： php jquery ajax codeigniter codeigniter-2

【解决方案1】：

在您的“视图”代码中，您犯了几个错误，如下所示：

1。按钮点击事件应该在<script>标签和ready()事件内

<script>
$(document).ready(function() {
    $(document.body).on('click', '.postbtn' ,function(e){
        e.preventDefault();
        $('#posting_comment').submit();
    });
});
</script>

2。在 AJAX 中，将 contentType: 'text' 更改为 false

jQuery.ajax({
    type: "POST",
    url: "<?php echo base_url();?>"+"dashboard/do_upload",
    data: fdata,
    mimeType:"multipart/form-data", 
    contentType: false, // change 'text' to false
    cache: false,
    processData:false,
    dataType: 'html', 
    success: function (data) {
      alert("d"+data);
    },
        error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log( errorThrown );  
    }

});

3。控制器变化：

您已使用$_POST['attachment_file']（应为$_FILES['attachment_file']）访问上传的文件。

4。在上传函数中提供文件控制名称：

替换这个 => $this->upload->do_upload($file_names);

with this => $this->upload->do_upload("attachment_file");

在根目录下创建“uploads”文件夹。

这些修正后它正在工作......

完整代码：

控制器（demo.php）：

<?php
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Demo extends CI_Controller {

function __construct()
{
    parent::__construct();
}

function uploadview()
{
    $this -> load -> view("uploadview");
}

function do_upload()
{
    $comment_topic=$_POST['comment_topic'];
    $attachment_file=$_FILES['attachment_file']['name'];
    $config['upload_path'] ='./uploads/';
    $config['allowed_types'] = 'gif|jpg|png||jpeg';
    $config['max_width'] = 1000;
    $config['max_height'] = 1000;
    $config['max_size'] = 20000000;
    $config['encrypt_name'] = FALSE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload("attachment_file")){
        echo "File $attachment_file Uploaded with Comment: $comment_topic";
    } else {
        echo "Upload Failed";
    }
}

查看（上传view.php）：

<html>
<head>
    <script type="text/javascript" src="<?php echo base_url() . "application/assets/public/"; ?>js/jquery-2.0.0.min.js"></script>
<script>
    $(document).ready(function() {
        $(document.body).on('click', '.postbtn' ,function(e){
            e.preventDefault();
            $('#posting_comment').submit();
        });
    });

    function sendCareerData()
    {
        var fdata = new FormData(document.getElementById("posting_comment"));

        jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url();?>"+"demo/do_upload",
            data: fdata,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            dataType: 'html',
            success: function (data) {
                alert("result: "+data);
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                console.log( errorThrown );
            }

        });

        return false;
    }
</script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <br/>
            <form name="posting_comment" id="posting_comment" method="post" enctype="multipart/form-data" onsubmit="return sendCareerData()">
                <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
                <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
                <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

输出：

【讨论】：

感谢 Siddharth，但我遇到了同样的问题，这是我收到的错误消息：未定义的索引：附件文件文件名：控制器/dashboard.php 行号：208
欢迎您，因为 $_POST['attachment_file'] 应该是 $_FILES['attachment_file']...现在检查...
我已经检查了 $_FILES['attachment_file'];但同样的问题也存在。请检查我的控制器并查看两者，我认为这可能是其他问题。
@Siddhart- 我已经检查了简单的文本字段，但它也不起作用。
@user3653474 : $this->upload->do_upload($file_names);没有声明 $file_names 变量...在上传函数中，您需要传递您的文件控制名称，即“attachment_file”。所以最终代码将是 $this->upload->do_upload("attachment_file");还要在你的根目录中创建“上传”文件夹。

【解决方案2】：

这是你的答案

首先在您的控制器中复制并粘贴此代码

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * User class.
 * 
 * @extends CI_Controller
 */
class Dashboard extends CI_Controller {

    /**
     * __construct function.
     * 
     * @access public
     * @return void
     */
    public function __construct() {

        parent::__construct();

               }

    public function index()
    {
           $this->load->library('upload');
          $this->load->helper(array('url'));
          $this->load->view('Test');
    }   
       public function do_upload()
           {
             $comment_topic=$this->input->post("comment_topic");
          $attachment_file=$_FILES["attachment_file"];
         $output_dir = "uploads/";
           $fileName = $_FILES["attachment_file"]["name"];
     move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
           }
    }

然后将此代码复制并粘贴到视图文件中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function sendCareerData()
{

    var data = new FormData($('#posting_comment')[0]);


     $.ajax({
               type:"POST",
               url:"<?php echo site_url('Dashboard/do_upload');?>",
               data:data,
               mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
               success:function(data)
              {
                        console.log(data);

               }
       });

}

</script>

<form name="posting_comment" id="posting_comment" >
      <input name="comment_topic" id="comment" type="text" class=" postinputox" placeholder="Enter Topic..."/>
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Post" onclick = "return sendCareerData()"/>
</form>

现在运行并检查结果以了解有关 ajx 的更多信息，请阅读此 http://w3code.in/2015/10/how-to-edit-delete-and-update-data-without-refreshing-page-in-codeigniter/，对于文件上传，请阅读此 http://w3code.in/2015/09/upload-file-using-codeigniter/ 和 http://w3code.in/2015/10/how-to-upload-file-using-ajax-in-codeigniter/

【讨论】：

感谢您的回答，但文件夹中没有保存文件。
我已经在控制器功能中更新了我的答案，请检查相同的文件夹名称和文件权限
不，它不工作。它无法从 ajax 获取字段值到控制器。请说明你是如何提交表格的，我认为上面没有包含代码。
请使用我在我的系统上运行的代码并上传文件我在您的视图文件中做了一些更改复制并粘贴我提供的完整视图代码
我在你的表单里面的按钮中从提交变成了点击

【解决方案3】：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
    <script>
      $(function () {
        $('#your_form_id').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'your receiver page URL',
            data: $('#your_form_id').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>

【讨论】：

请提供一些解释。
@Vishal 我试过你的代码，但问题是一样的，它无法访问控制器上的字段数据。