Php 表单加载为空后提交表单

我将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>

$（文档）.ready（函数（）{
$（“#sload”）.load（'save1.php'，函数（forma）{
$（“.csave”）。单击（函数（）{
$.ajax({
键入：“POST”，
url:$（'#form1'）.attr（'action'），
数据：$（'#form1'）。序列化（），
成功：函数（数据）{
警报（数据）；
}
})
返回false；
});
});
});

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

---

您需要像这样分离加载和保存的逻辑：

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

下面是一个单页脚本的示例（基于您的代码）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>

save1.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>

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

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

?>


日期：
地点：

input1.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>

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

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

?>

使用var\u dump（$\u POST）查看Jquery函数或php中此arrayvar\u dump（$\u POST）中的内容？请举个例子？在你的input1.php中，执行die（var_dump（$\u POST））并在单击保存后，通过chrome开发控制台或firebug或类似的方式检查ajax响应。加载资源失败：服务器响应状态为404（未找到）。顺便说一句
mysql.*
库已弃用。请使用
PDO
或
MySQLi
。此外，还需要转义posted表单字段值；由于您现在对SQL注入持开放态度…如果单页示例令人困惑，请告诉我，我可以按您的方式将其拆分。请根据需要拆分为3个文件，谢谢。请通过电子邮件将其发送到tijobae@gmail.com，很高兴认识你，Latheesan Kanes