jquery ajax顯示數據庫數據而不刷新

Question

我真的很新，jquery和ajax，我正在努力如何去做這件事。 我正在使用jquery mobile 1.4.1，我試圖顯示已經保存到數據庫的表單數據，而無需從彈出窗口中刷新頁面。

我有一個頁面，我點擊一個按鈕打開一個彈出窗口。用戶可以在彈出框中輸入信息，當點擊提交時，表單數據通過ajax傳遞給我的php腳本來更新數據庫;這工作。

這是彈出的形式：

$(document).ready(function() 
    { 
     $('#submit').click(function() 
     { 
      $.post("submitNewCustId.php", $("#addId").serialize(), function(response) 
      { 
       $('#success').html(response); 
      }); 
      return false; 
     }); 
    }); 
</script> 

<div data-role='popup' id='addCustId' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width:300px;'> 
<div data-role='header' data-theme='a'> 
    <h1>Add Identification Type</h1> 
</div> 
<div data-role='main' class='ui-content'> 
    <form id='addId' action ='newcustomerid.php' method='post' > 
     <input type="hidden" name="cust_id" value='<?php echo $custid; ?>'> 
     <input type="hidden" name="sess_id" value='<?php echo $sid; ?>' /> 
     <input type="hidden" name="submitted" value="true"/> 
      <div class="ui-field-contain"> 
       <label for="phoneType">Type</label> 
        <select name="idType" id="idType" data-native-menu="false"> 
         <?php echo $idInnerOptions; ?> 
        </select> 
      </div> 
      <div class="ui-field-contain"> 
       <label for="phoneNumber">Description</label> 
       <input type="text" name="idDesc" id="idDesc" value=""> 
      </div> 
      <div class='ui-grid-a'> 
       <div class='ui-block-a'><input type='submit' id="submit" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' /></div> 
       <div class='ui-block-b'><a href='#' class='ui-btn' data-rel='back' data-transition='pop'>Cancel</a></div> 
       <div id="success" style="color:black;"></div> 
      </div> 
    </form> 

</div> 

這是PHP（我知道它很基本的，我會在驗證等工作後）：

$idType = $_POST['idType']; 
$idDesc = $_POST['idDesc']; 
$custId = $_POST['cust_id']; 
$sessId = $_POST['sess_id']; 

$sql = "call theFunction ('". $idType ."','". $custId ."','". $idDesc ."','". $sessId ."')"; 
$insert = sasql_query($connect, "$sql"); 

然而，在我的數據庫更新後，我希望關閉彈出窗口，並使用已保存在數據庫中的新數據更新初始頁面。 下面是需要更新的代碼：

while($row = sasql_fetch_array($idresult)) 
    { 
     echo " 
     <li> 
      <div class='container_12'> 
        <div class='grid_15'> 
       <div class='ui-grid-a'> 
        <div class='ui-block-a'><div id='idType' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div></div> 
      <div class='ui-block-b'><div id='idNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div> 
     </div> 
      </div> 
     </div> 
     <div class='grid_120'> 
    <a href='#editCustId' data-rel='popup' data-position-to='window' data-transition='pop' style='padding:0px; margin:0px; border:0px; float: right;' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a> 
      </div> 
     </div> 
    </li> 
    "; 
     } //end while 
     echo "</ul>"; 

我不知道如何做到這一點 - 我的問題是1，我怎麼能關閉彈出窗口按下時提交和2.我怎麼可以更新PHP while循環顯示沒有頁面刷新的新行？ 我希望這一切都有道理，謝謝你的幫助。

Answer 1

最好的方法是使用$_SESSION s和ajax在一起。這裏是我的裂紋吧：

的jQuery：

$(document).ready(function(){ 
    $('form#addId').sumbit(function(){ 
     $.ajax({ 
      type:'POST', 
      url:'yourPHP.php', 
      data:{idType:$('select[name="idType"]').val(),idDesc:$('input[name="idDesc"]').val()}, 
      beforeSend:function(xhr){ 
       //validation here. 
       if($('input[type="text"]','form#addId').val().length<3)xhr.abort();//this will prevent the ajax from sending the POST to your php page. IF the values of the text inputs are less than 3. 
      }, 
      success:function(result){ 
       console.log(result);//shows the result in the console. 
       var rowBuilder=result.split(';'); 
       var rows=new Array(); 
       rowBuilder.foreach(function(){ 
        var temp=this.split(':'); 
        rows[temp[0]]=temp[1]; 
       }); 
       //hopefully rows is now: rows{'idType'=>'value'); 
      } 
     }); 
     return false; 
    }); 
}); 

與你的PHP我建議一類結構和使用的mysqli

while($row=sasql_fetch_array($idresult){ 
    echo'rowDescription:'.$row['description'].';rowNumber:'.$row['number'].';'; 
} 

也使cust_id和sess_id$_SESSION就像這樣：

$_SESSION['cust_id']=$cust_id;//this will mean you can use the variable on any PHP page within your website once it's been set. 
//will require session_start(); on ever line 1 on your page. It HAS to be line 1. 

Array行現在可用於在彈出窗口之前放入前一個字段。希望這有助於。讓我知道如果你有任何問題