在div中加载内容

Question

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

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

此外，我面临一个问题，加载表格结果在div后我点击提交表格消失了我做错了什么？

这是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 个解决方案

解决方案1
2 已采纳 2014-01-01 05:42:50

在div中加载内容

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-01-01 05:42:50

解决方案1
2 已采纳 2014-01-01 05:42:50