[英]Not able to submit form using ajax, php and jquery
I am trying to submit a form using ajax. 我正在尝试使用Ajax提交表单。 In the backend part, i am trying to print the values of "fname", "location" and "image" in order to check if the data is reaching there or not
在后端部分,我试图打印“ fname”,“ location”和“ image”的值,以便检查数据是否到达那里
But when I am trying to do console.log to check for response, I get the following message 但是,当我尝试执行console.log以检查响应时,出现以下消息
for dataString 对于dataString
filename=girl.jpgfname=johnlocation=Richmond, Virginia
filename = girl.jpgfname = johnlocation =弗吉尼亚里士满
for fname 为fname
Severity: Notice Message: Undefined index: fname
严重性:通知消息:未定义索引:fname
for image 用于图像
No response
没有反应
I am not able to fetch the data at the backend, can anyone please help me with this 我无法在后端获取数据,有人可以帮我吗
Form 形成
<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 脚本
<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>
On backend 在后端
$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'];
The selected values in the form was: 表单中的选定值是:
name of the file = girl.jpg
文件名= girl.jpg
first name(fname) = John
名(fname)=约翰
value i had select from location dropdown = Richmond, Virginia
我从位置下拉菜单中选择的值=弗吉尼亚州里士满
{
$.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);
}});
}
for image only keep this 对于图像仅保留此
var filename = $('input[type=file]').val()
as codeignitor will show only the name in controller, no need to replace or ci wont be able to figure the path 因为codeignitor将仅显示控制器中的名称,所以无需替换或无法找到路径
the problem lies in your 问题出在你
dataString
you can do this: 你可以这样做:
var dataString='filename=' + filename + '|fname=' + fname + '|location=' + location;
so when you receive dataString in the backend (php) , you can split the dataString using: 因此,当您在后端(php)中收到dataString时,可以使用以下方法拆分dataString:
$dataString=explode('|', $dataReceived);
so you can get each part by doing this: 因此您可以通过执行以下操作来获取每个部分:
$filename=$dataString[0];
$fname=$dataString[1];
$location=$dataString[2];
hope it helps 希望能帮助到你
您的dataString必须是JavaScript对象。
var data = {filename: filename, fname: fname, location: location};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.