Jquery로 필드를 업데이트하는 방법

Question

나는 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> 

Answer 1

새롭게 업데이트 된 데이터를 ajax 응답으로 보내면 값을 양식으로 설정할 수 있습니다.

Answer 2

필드를 편집하고 저장 한 후 데이터베이스에서 데이터를 표시하는 ajax 함수를 호출하십시오.

예컨대 :

function show() { 
    ... show ajax data here 
} 

$(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){ 
       show(); 
      } 
     }); 
    })); 
});