提交表單後形式負載是空白

Question

我做的index.php這樣的：

<script src="js/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function(){ 

$("#sload").load('save1.php',function(forma){ 
    $(".csave").click(function(){ 
     $.ajax({ 
      type: 'POST', 
      url: $('#form1').attr('action'), 
      data: $('#form1').serialize(), 
      success: function(data) {  
       alert(data); 
      } 
     }) 
     return false; 
    }); 
}); 
}); 
</script> 
<a href="#" class="csave">SAVE</a> 
<div id="sload"></div> 

save1.php這樣的：

<table> 
<form method="post" name="form1" id="form1" action="input1.php"> 
    <tr>  
     <td>Date</td><td>:</td><td><input name="date" id="date"/></td> 
    </tr> 
    <tr>  
     <td>Location</td><td>:</td><td><input name="location" id="location" /></td> 
    </tr> 
</form> 

和input1.php

<? session_start(); 
include "db.php"; 
$date=$_POST['date']; 
$location=$_POST['location']; 

mysql_query("insert into hal (date,location) values ('$date','$location')"); 
?> 

我點擊保存後沒有錯誤，但數據庫我存儲在一個空的領域。填寫空白後提交表格

謝謝。

Answer 1

你需要加載的邏輯分離和保存這樣的：

下面是一個例子（根據您的代碼）作爲一個單一的頁面腳本test.php的：

<?php 

// Load Form 
if (isset($_GET['loadForm'])) 
{ 
    exit('<form method="post" name="form1" id="form1" action="test.php"> 
    <table> 
     <tr>  
      <td>Date</td><td>:</td><td><input name="date" id="date"/></td> 
     </tr> 
     <tr>  
      <td>Location</td><td>:</td><td><input name="location" id="location" /></td> 
     </tr> 
    </table> 
    </form>'); 
} 

// Handle Form Save 
if (count($_POST) > 0) 
{ 
    // TODO 
    exit('got form data: '. print_r($_POST, true)); 
} 

?> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 

// When Page Loads 
$(document).ready(function() 
{ 
    // Load Form 
    $('#sload').load('test.php?loadForm'); 

    // Handle Save Click 
    $('.csave').click(function() 
    { 
     $.ajax({ 
      type: 'POST', 
      url: $('#form1').attr('action'), 
      data: $('#form1').serialize(), 
      success: function(data) {  
       alert(data); 
      } 
     }); 
    }); 
}); 

</script> 

<a href="#" class="csave">SAVE</a> 
<div id="sload"></div> 

當我點擊保存，這是輸出是什麼：

要完成此代碼，添加數據庫行插入代碼，它說TODO。希望這可以幫助。

---

更新

這裏的拆分版本：

的index.php

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 

// When Page Loads 
$(document).ready(function() 
{ 
    // Load Form 
    $('#sload').load('save1.php'); 

    // Handle Save Click 
    $('.csave').click(function() 
    { 
     $.ajax({ 
      type: 'POST', 
      url: $('#form1').attr('action'), 
      data: $('#form1').serialize(), 
      success: function(data) {  
       alert(data); 
      } 
     }); 
    }); 
}); 

</script> 

<a href="#" class="csave">SAVE</a> 
<div id="sload"></div> 

save1.php

<form method="post" name="form1" id="form1" action="input1.php"> 
<table> 
    <tr>  
     <td>Date</td><td>:</td><td><input name="date" id="date"/></td> 
    </tr> 
    <tr>  
     <td>Location</td><td>:</td><td><input name="location" id="location" /></td> 
    </tr> 
</table> 
</form> 

input1.php

<?php 

session_start(); // what's this for? you aren't using session on this file 

// this is not safe! use mysqli or pdo and escape post values!!! 
include "db.php"; 
$date=$_POST['date']; 
$location=$_POST['location']; 

mysql_query("insert into hal (date,location) values ('$date','$location')"); 

?>