Question

当用户点击加载2.php文件的表单时，我有3个php文件，看看用户是否可以填写表单，如果他可以填写表单，并填写表格后我想要结果显示在div id=content的1.php

中

在新窗口中调用/打开带有表单内容的php文件比在div中加载更好的做法。加载div不必要的辛苦吗？我认为用户点击链接并查看他希望在同一页面的div id=content中看到的内容更好。这是好的做法吗？

另外我面临一个问题，在我点击提交表单后加载表单结果我的表单会消失吗？

这是3个文件

1.PHP

<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/layout.css"; />
    </head>
    <body>
        <div id="header">
        </div>
        <div id="menu">
            <a href="#" id="l1"> Form </a>
        </div>  
        <div id="content">
        </div>  
        <div id="footer">
        </div>
    </body>
    <script>
        $(document).ready(function(){
            $('#l1').click(function(){
                $('#content').load('2.php');
            });
        });
    </script>
</html>

2.PHP

<?php
//code here that checks if user can fill form

echo'<script>$("#content").load("3.php");</script>';

// if user cannot
echo "You have already filled";
?>

3.php

<?php
    //check for user session and form_status using $_SESSION 
    if( isset($_POST['submit']) ){
        $form_value=array();
        foreach($_POST as $key => $value){
            $form_value[$key]=htmlspecialchars(trim($value),ENT_QUOTES);
            echo "{$form_value[$key]}<br/>";
        }

    }
?>
    <form method="post" name="stud_det" id="stud_det" action="" >
        <table>
            <tr>
                <td>Name :</td><td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td>Register Number :</td><td><input type="text" name="regno"/></td>
            </tr>
            <tr>
                <td>Date of Birth :</td><td><input type="text" name="dob"/></td> 
            </tr>
            <tr>
                <td><input type="submit" name="submit" value="Submit" style="font-size:16px;"/></td>
            </tr>
        </table>
    </form>

<script>
    $("#stud_det").submit(function(){
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr("post"),
                url: $(this).attr("3.php");
                success: function(response){
                    $("#content").html(response);
                }
            });
            return true;
        });
</script>

layout.css中

#menu{
    position:absolute;
    top:10%;
    bottom:10%;
    left:0;
    right:90%;
    background-color:#7c7;
    font-size:18px;
}
#header{
    position:absolute;
    top:0;
    bottom:90%;
    left:0;
    right:0;
    background-color:#ff0;
}
#footer{
    position:absolute;
    top:90%;
    bottom:0;
    left:0;
    right:0;
    background-color:#fcf;
}
#content{
    position:absolute;
    top:10%;
    bottom:10%;
    left:10%;
    right:0;
    background-color:#ccc;
    text-align:center;
    font-size:18px;
}

Answer 1

将内容加载到当前页面而不重新加载通常更灵活，因此这是常见的做法。

对于最后一个问题，在.submit()功能中，将return true更改为return false。返回false告诉浏览器不要运行提交按钮的默认操作，即执行重新加载页面的正常表单提交。

运行代码时发现的其他错误：

这里有一个不受欢迎的;：

<link rel="stylesheet" href="css/layout.css"; />

你的AJAX有：

            type: $(this).attr("post"),
            url: $(this).attr("3.php");

那些错了，应该是：

            type: $(this).attr("method"),
            url: "3.php",

另一个问题是，当您使用$(this).serialize()时，它不会在数据中包含submit按钮。因此，当3.php执行if(isset($_POST['submit']))时，它不会成功。我建议您检查是否设置了其中一个输入字段。

因此，对于所有修复，3.php现在看起来像：

<?php
    //check for user session and form_status using $_SESSION 
    if( isset($_POST['name']) ){
        $form_value=array();
        foreach($_POST as $key => $value){
            $form_value[$key]=htmlspecialchars(trim($value),ENT_QUOTES);
            echo "{$form_value[$key]}<br/>";
        }

    }
?>
    <form method="post" name="stud_det" id="stud_det" action="" >
        <table>
            <tr>
                <td>Name :</td><td><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td>Register Number :</td><td><input type="text" name="regno"/></td>
            </tr>
            <tr>
                <td>Date of Birth :</td><td><input type="text" name="dob"/></td> 
            </tr>
            <tr>
                <td><input type="submit" name="submit" value="Submit" style="font-size:16px;"/></td>
            </tr>
        </table>
    </form>

<script>
    $("#stud_det").submit(function(){
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr("method"),
                url: "3.php",
                success: function(response){
                    $("#content").html(response);
                }
            });
            return false;
        });
//@ sourceURL=dynamicScript.js
</script>

在div中加载内容

1 个答案: