我是Ajax和Bootstrap模型的新手。我按照本教程Webslesson Tutorial进行操作。但是，我在上传文件和更新数据时遇到了一些问题。请提出一些想法。 错误：
插入数据时，未定义索引：图像
在编辑按钮单击
newsandnotice.php
<?php
if (isset($_GET['delmessage'])) {
echo '<script type="text/javascript" language="javascript">
alert("' . $_GET['delmessage'] . '");
</script>';
} else if (isset($_GET['editmessage'])) {
echo '<script type="text/javascript" language="javascript">
alert("' . $_GET['editmessage'] . '");
</script>';
}
//load the classes
require_once("../classes/connection.class.php");
require_once("../classes/notice.class.php");
$objNotice = new Notice();
$objNotice->getNotice();
?>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">
<?php
if(isset($_GET['action']))
{
if($_GET['action'] == "newsAndNotice"){
echo "News And Notice";
}
}
?>
</li>
</ol>
<p>
</p>
<h2>Recent Notice and News View</h2>
<div class="table-responsive">
<div align="left">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">
<span class="glyphicon glyphicon-plus">Add</span>
</button>
</div>
<br />
<div id="notice_table">
<table class="table">
<tr>
<th>S.N</th>
<th>Notice Topic</th>
<th>Notice Description</th>
<th>Notice Date</th>
<th>Picture</th>
<th>Action</th>
</tr>
<?php
$t=1;
if (sizeof($objNotice->data) > 0) {
foreach ($objNotice->data as $key => $value) {
?>
<tr>
<td><?php echo $t++;?></td>
<td><?php echo $value['noticeTitle'];?></td>
<td width="400"><?php echo substr($value['noticeDesc'],0,500)?>....</td>
<td><?php echo $value['noticeDate'];?></td>
<td>
<?php if($value['noticePicture']!="-" || $value['noticePicture']==""){?> <img src="image/notice/<?php echo $value['noticePicture'];?>" width="50px" height="50px"/>
<?php }else{ echo"No image Availbale";}?>
</td>
<td>
<a href="#" name="edit" value="Edit" id="<?php echo $value["noticeId"]; ?>" class="edit_data">
<span class="fa fa-edit"></span>
</a> ||
<a href="#" name="view" value="view" id="<?php echo $value["noticeId"]; ?>" class="view_data" >
<span class="fa fa-eye"></span>
</a>
</td>
</tr>
<?php
}
}
?>
</table>
</div>
</div>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">News And Notice Details</h4>
</div>
<div class="modal-body" id="noticeAndNews_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add & Update News And Notice</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form" enctype="multipart/form-data">
<label>News Title: </label>
<input type="text" name="title" id="title" class="form-control" />
<br />
<label>News Description: </label>
<textarea name="description" id="description" class="form-control" required=""></textarea>
<br />
<br />
<label>Date: </label>
<input type="date" name="date" id="date" class="form-control" required=""/>
<br />
<label>Picture: </label>
<input type="file" name="image" id="image" accept="image/*" class="form-control" />
<br />
<input type="hidden" name="noticeId" id="noticeId" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
var noticeId = $(this).attr("id");
$.ajax({
url:"views/fetch/fetchNewsAndNotice.php",
method:"POST",
data:{noticeId:noticeId},
dataType:"json",
success:function(data){
$('#title').val(data.noticeTitle);
$('#description').val(data.noticeDesc);
$('#date').val(data.noticeDate);
$('#image').val(data.noticePicture);
$('#noticeId').val(data.noticeId);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#title').val() == "")
{
alert("title is required");
}
else if($('#description').val() == '')
{
alert("description is required");
}
else if($('#date').val() == '')
{
alert("date is required");
}
else
{
$.ajax({
url:"../processes/addnotice.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#notice_table').html(data);
}
});
}
});
$(document).on('click', '.view_data', function(){
var noticeId = $(this).attr("id");
if(noticeId != '')
{
$.ajax({
url:"views/select/selectNoticeAndNews.php",
method:"POST",
data:{noticeId:noticeId},
success:function(data){
$('#noticeAndNews_detail').html(data);
$('#dataModal').modal('show');
}
});
}
});
});
</script>
fetchNewsAndNotice.php
<?php
require_once("../../../classes/connection.class.php");
require_once("../../../classes/notice.class.php");
if(isset($_POST["noticeId"]))
{
$objNotice = new Notice();
$objNotice->setNoticeId($_POST["noticeId"]);
$objNotice->getNotice();
echo json_encode($objNotice->data);
}
?>
addNotice.php
<?php
//load the classes
ob_start();
require_once("../classes/connection.class.php");
require_once("../classes/notice.class.php");
$objNotice = new Notice();
if(!empty($_POST)) {
$output = '';
$message = '';
$noticeTitle=$_POST['title'];
$noticeDate=$_POST['date'];
$noticeDesc= mysqli_real_escape_string(Connection::$conxn,$_POST['description']);
$objNotice->setNoticeTitle($noticeTitle);
$objNotice->setNoticeDate($noticeDate);
$objNotice->setNoticeDesc($noticeDesc);
//change part start
if($_POST["noticeId"] != '')
{
$noticeId = $_POST['noticeId'];
$objNotice->setNoticeId($noticeId);
if( $_FILES['image']['size'] > 0){
$objNotice->setPicture($image);
$flag = $objNotice->editUploadOnServer('image', '../adminview/image/notice/');
}else
{
$objNotice->setPicture($image);
$flag = $objNotice->updateNotice();
}
$message = 'Data Updated';
}
else{
if($_FILES['image']['size'] > 0)
{
$flag = $objNotice->uploadOnServer('image', '../adminview/image/notice/');
}
else
{
$image = "-";
$objNotice->setPicture($image);
$flag = $objNotice->addNotice();
}
$message = 'Data Inserted';
}
//change part end
if($flag){
$output .= '<label class="text-success">' . $message . '</label>';
$output .= '
<table class="table table-bordered">
<tr>
<th>S.N</th>
<th>Notice Topic</th>
<th>Notice Description</th>
<th>Notice Date</th>
<th>Picture</th>
<th>Action</th>
</tr>>';
$t=1;
$objNoticeGet = new Notice();
$objNoticeGet->getNotice();
if (sizeof($objNoticeGet->data) > 0)
{
foreach ($objNoticeGet->data as $key => $value)
{
$output .= '
<tr>
<td>'.$t++.'</td>
<td>'.$value['noticeTitle'].'</td>
<td width="400">'.substr($value['noticeDesc'],0,500).'....</td>
<td>'.$value['noticeDate'].'</td>
<td><img src="image/notice/'.$value['noticePicture'].'" width="50px" height="50px"/></td>
<td>
<a href="#" name="edit" value="Edit" id="'.$value["noticeId"] .'" class="edit_data">
<span class="fa fa-edit"></span>
</a> ||
<a href="#" name="view" value="view" id="' . $value["noticeId"] . '" class="view_data" >
<span class="fa fa-eye"></span>
</a>
</td>
</tr>';
}
}
$output.='</table>';
}
echo $output;
}
ob_end_flush();
?>
答案 0 :(得分：0)
首先，我想弄清楚你会得到什么错误。尝试在ajax调用中添加错误处理程序：
$.ajax({
...
error: function (xhr, textStatus, errorThrown) {
alert('ERROR: status='+xhr.status+", textStatus="+textStatus+", errorThrown="+errorThrown);
},
});
您还可以使用控制台日志查看您在ajax呼叫之前发送的内容：
console.log("Sending "+$('#insert_form').serialize());