提交表单后形式负载是空白

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')"); 

?>