如何使用Jquery更新字段

时间:2017-05-13 17:24:02

标签: javascript jquery ajax

我正在做一个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>

1 个答案:

答案 0 :(得分:0)

将新更新的数据发送到ajax响应,然后您可以将值设置为表单。