我正在做一个PHP + Mysql + Jquery编辑表单。我想知道在编辑字段并保存在数据库中后,jquery如何在字段中显示新数据而不刷新整个页面。我目前使用:
$(document).ready(function (e) {
$('form[name=form_edit]').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
var form = $(this);
var conte = $('#form-edit');
$.ajax({
type:'POST',
url: '<?php echo ROOT_URL ?>/sites/crud-sites',
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
location.reload();
}
});
}));
});
location.reload();它可以工作,但它会重新加载整个页面。我只想重新加载字段。
仍然不太明白该怎么做。我的表单看起来像这样: 我想要更新的主要字段是图像字段。
<form action="" method="post" enctype="multipart/form-data" id="form-edit" name="form_edit" class="form-horizontal form-bordered" onsubmit="return false;">
<div class="form-group">
<label class="col-md-3 control-label">ID</label>
<div class="col-md-9">
<input type='text' name="id" value="<?php echo $sites['id'] ?>" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Nome Site</label>
<div class="col-md-9">
<input type="text" id="example-text-input" name="name" class="form-control" value="<?php echo $sites['name'] ?>">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<textarea id="desc" rows="10" cols="80" name="desc"><?php echo $sites['site_desc']?></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-email-input">Link Demo</label>
<div class="col-md-9">
<input type="url" id="example-email-input" name="linkdemo" class="form-control" value="<?php echo $sites['linkdemo'] ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="linkmember">Link Member</label>
<div class="col-md-9">
<input type="text" id="example-email-input" name="linkmember" class="form-control" value="<?php echo $sites['linkmember'] ?>">
<span class="help-block">Link da area de membros</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Novo</label>
<div class="col-md-9">
<label class="checkbox-inline" for="example-inline-checkbox1">
<input type="checkbox" id="checkbox-isnovo" name="isnovo" value="<?php echo ($sites['isnovo']==1)?'true':'false'?>" <?php echo ($sites['isnovo']==1)?'checked="checked"':''?>> Sim
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Categorias</label>
<div class="col-md-9">
<input type="text" id="example-tags" name="categorie" class="input-tags" value="<?php echo $sites['categorie'];?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="val_digits">Ordem <span class="text-danger">*</span></label>
<div class="col-md-9">
<div class="input-group">
<input type="text" id="val_digits" name="order" class="form-control valid" value="<?php echo $sites['sorder'] ?>" aria-required="true" aria-describedby="val_digits-error" aria-invalid="false">
<span class="input-group-addon"><i class="gi gi-asterisk"></i></span>
</div>
</div>
</div>
<input type='hidden' name='action' value='edit'>
<div class="block">
<div class="block-title">
<h2><strong>Images</strong> Elements</h2>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Folder</label>
<div class="col-md-9">
<input type="text" id="example-text-input" name="folder" class="form-control" value="<?php echo $sites['folder'] ?>">
</div>
</div>
<label class="col-md-3 control-label" for="example-file-input">Capa</label>
<div class="form-group">
<div class="col-md-9">
<img id='screen' src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['screen']}" : "../images/sem-screen.jpg" ?>" height="195" width="320"> <input type="file" id="example-file-input" name="screen" ></br>
<label for="example-file-input">Thumb 01</label> </br>
<img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb1']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb1"> </br>
<label for="example-file-input">Thumb 02</label> </br>
<img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb2']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb2"> </br>
<label for="example-file-input">Thumb 03</label> </br>
<img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb3']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb3"> </br>
<label for="example-file-input">Thumb 04</label> </br>
<img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb4']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb4"> </br>
</div>
</div>
</div>
<div class="form-group form-actions">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary" id="envio"><i class="fa fa-pencil"></i> Edit</button>
<button type="reset" class="btn btn-warning"><i class="fa fa-repeat"></i> Reset</button>
</div>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'desc' );
</script>
</form>
答案 0 :(得分:0)
将新更新的数据发送到ajax响应,然后您可以将值设置为表单。