无法使用 ajax、php 和 jquery 提交表单答案

【问题标题】：Not able to submit form using ajax, php and jquery无法使用 ajax、php 和 jquery 提交表单
【发布时间】：2018-02-16 06:52:15
【问题描述】：

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

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

对于数据字符串

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) = 约翰

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

【问题讨论】：

将你的参数重构为 json
在您的后端页面上更改此代码。 $returnres['img_name'] = $data['file-input']; $returnres['fname'] = $_POST['fname']; echo json_encode ($returnres)

标签： javascript php jquery ajax

【解决方案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 只会显示控制器中的名称，无需替换，否则 ci 将无法计算路径

【讨论】：

像这样使用ajax并检查
值已获取但图像仍未获取
当我尝试在后端回显名称时，它会将文件名的值打印为“C:\fakepath\girl.jpg”，这是正确的吗？我得到了这个结果，文件没有上传
是的，没错，如果没有上传，你需要检查你的上传代码
你能看一下上传代码吗，我真的无法理解我哪里出错了，也就是说我没有上传任何文件

【解决方案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];

希望对你有帮助

【讨论】：

【解决方案3】：

您的 dataString 必须是 JavaScript 对象。

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

【讨论】：