无法使用ajax，php和jquery提交表单

Question

我正在尝试使用Ajax提交表单。 在后端部分，我试图打印“ fname”，“ location”和“ image”的值，以便检查数据是否到达那里

但是，当我尝试执行console.log以检查响应时，出现以下消息

对于dataString

filename = girl.jpgfname = johnlocation =弗吉尼亚里士满

为fname

严重性：通知消息：未定义索引：fname

用于图像

没有反应

我无法在后端获取数据，有人可以帮我吗

形成

<form class="form-inline" id="form_add"  enctype="multipart/form-data"> 
  <input type="file" id="file-input" name="file-input"  accept="image/*" >

  <input type="text" class="form-control name" id="fname"  placeholder="First Name" >                            
  <select class="location" id="location" >
    <option value="">Location</option>
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
  </select>
  <button type="submit" class="save_btn"  id="submit" > <img src="save.png" class="Save">   </button>
</form>

脚本

<script>
  $("#submit").click(function()
    {
      event.preventDefault();
      var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
      var fname = $("#fname").val();
      var location = $("#location").val();
      var dataString = 'filename='+ filename + 'fname='+ fname + 'location='+ location;
      if(filename != "" || fname != "" || location != "")
            {
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: dataString,
                cache: false,
                success: function(result){
                  console.log(result);
                  console.log(dataString);
                }});
            }
    });
</script>

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

在后端

$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;

$this->load->library('upload', $config);
$data = $this->upload->data();
echo $img_name = $data['file-input'];

echo $_POST['fname'];

表单中的选定值是：

文件名= girl.jpg

名（fname）=约翰

我从位置下拉菜单中选择的值=弗吉尼亚州里士满

Answer 1

{
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: {
                        filename : filename,
                        fname:fname,
                        location:location
                      },
                cache: false,
                success: function(result){
                  console.log(result);
                  console.log(dataString);
                }});
            }

对于图像仅保留此

var filename = $('input[type=file]').val()

因为codeignitor将仅显示控制器中的名称，所以无需替换或无法找到路径

Answer 2

问题出在你

dataString

你可以这样做：

var dataString='filename=' + filename + '|fname=' + fname + '|location=' + location;

因此，当您在后端（php）中收到dataString时，可以使用以下方法拆分dataString：

$dataString=explode('|',  $dataReceived);

因此您可以通过执行以下操作来获取每个部分：

$filename=$dataString[0]; 
$fname=$dataString[1];
$location=$dataString[2];

希望能帮助到你

Answer 3

您的dataString必须是JavaScript对象。

  var data = {filename: filename, fname: fname, location: location};