使用html表单和php链接div中的页面

所以我有这个html代码

<div id="wrap">
<div id="header">

</div>
<div id="content">
    <form method="POST" action="code.php"> 
        Name:
        <input type="text" name="name" size="50">
        <input type=submit value="Get Code">
        </form> 
</div>
<div id="footer">

</div>

姓名：

在用户单击提交到#content div之后，是否可以加载code.php

本质上，我想要的是当用户单击submit按钮时，处理后的code.php被加载到同一个#content div

比如说在我的code.php中，在处理输入的数据后，我产生了这段代码

<?php
some processing code here;
$name = 'john';
echo $name;
?>

所以在点击submit之后，用户会看到

<div id="content">
john
</div>

厕所

希望我没有重复我的问题，请让我知道这是否可能与javascript，php或任何东西

---

谢谢你的阅读

既然您已经标记了jQuery，我将使用jQuery示例

$(document).ready(function(){
    $('form').submit(function(){
       $('#content').load('code.php');
       return false;
    })
})

这里有几个假设

这假设code.php与您现在所在的路径相同

页面中只有一个表单

正如@johnhunter所指出的，这个例子显然不适用于post。您可以将post数据与方法一起发送。有关用法，请参见此处：

编辑

下面是一个小提琴的例子：

它用来自jsfiddle/net/echo/html（一个空字符串）的内容替换表单区域

---

注意2确保将代码包含在

$（document）.ready（）中或包含在页面底部。不言而喻，您需要在页面中使用jQuery来运行它
 既然您已经标记了jQuery，我将使用jQuery示例

$(document).ready(function(){
    $('form').submit(function(){
       $('#content').load('code.php');
       return false;
    })
})

这里有几个假设

这假设code.php与您现在所在的路径相同
页面中只有一个表单
正如@johnhunter所指出的，这个例子显然不适用于post。您可以将post数据与方法一起发送。有关用法，请参见此处：
编辑

下面是一个小提琴的例子：

它用来自jsfiddle/net/echo/html（一个空字符串）的内容替换表单区域

注意2确保将代码包含在
$（document）.ready（）中或包含在页面底部。不言而喻，您需要在页面中使用jQuery来运行它
 您可能想签出jquery表单插件
您可能想签出jquery表单插件
@JohnP是的，$。加载是一个很好的解决方案。但是，您需要在请求中发送表单数据：

更新了[3]以发送包含多个字段和复选框的帖子：

$('form').submit(function(){

        // create an object to send as a post
        var form = this,
            fields = form.elements,
            el,
            post = {};


        for (var i = fields.length; i--; ) {
            el = fields[i];
            if (el.name) {
                switch (el.type) {
                    case 'checkbox':
                    case 'radio':
                        post[el.name] = (el.checked) ? el.value : '';
                    break;
                    default:
                        post[el.name] = el.value;
                }
            }
        }

    // send the form data in the load request...
    $('#content').load(this.action, post);
    return false;
});

这将以POST的形式发送数据。
@JohnP是的，$.load是一个很好的解决方案。但是，您需要在请求中发送表单数据：

更新了[3]以发送包含多个字段和复选框的帖子：

$('form').submit(function(){

        // create an object to send as a post
        var form = this,
            fields = form.elements,
            el,
            post = {};


        for (var i = fields.length; i--; ) {
            el = fields[i];
            if (el.name) {
                switch (el.type) {
                    case 'checkbox':
                    case 'radio':
                        post[el.name] = (el.checked) ? el.value : '';
                    break;
                    default:
                        post[el.name] = el.value;
                }
            }
        }

    // send the form data in the load request...
    $('#content').load(this.action, post);
    return false;
});

这将以POST的形式发送数据。
使用简单

<div id="content">
   if(isset($_POST['submit'] && !empty($_POST) )
   {
      // do your all post process
      $name ='John';
      echo  $name;
   }
   else {
    <form method="POST" action="$_SERVER['PHP_SELF']"> 
        <label for="uname" >Name:</label><input type="text" name="uname" id="uname" size="50">
        <input type=submit value="Get Code" name="submit">
     </form> 
   }
</div>


如果（isset（$\u POST['submit']&&！empty（$\u POST））
{
//完成所有后期处理
$name='John'；
echo$name；
}
否则{
姓名：
}
以简单的方式使用

<div id="content">
   if(isset($_POST['submit'] && !empty($_POST) )
   {
      // do your all post process
      $name ='John';
      echo  $name;
   }
   else {
    <form method="POST" action="$_SERVER['PHP_SELF']"> 
        <label for="uname" >Name:</label><input type="text" name="uname" id="uname" size="50">
        <input type=submit value="Get Code" name="submit">
     </form> 
   }
</div>


如果（isset（$\u POST['submit']&&！empty（$\u POST））
{
//完成所有后期处理
$name='John'；
echo$name；
}
否则{
姓名：
}
在我的例子中，您的两个假设都是正确的，但由于某种原因，似乎没有加载到div中，当我单击“提交”时，只加载code.php。我可能将代码放在了错误的位置。我将其加载到了#content div中的code.php中，但没有“john”，我假设这是因为我使用了post方法，因此没有post进程在php中完成？是否有错误？在firefox中，按[code>CTRL+SHIFT+J
打开错误控制台。清除错误，然后运行代码并报告可能出现的错误。记住将上述代码包含在
$（文档）。ready（）
！警告：属性选择器中出现意外标记：“！”。源文件：行：0-不知道这是什么意思。请粘贴问题中使用的JS代码？或将整个HTML文件粘贴到PasteBin中。在我的情况下，您的两个假设都是正确的，但由于某种原因似乎没有加载到div中，请在单击submit时加载code.php。I我可能把代码放错地方了。我在#content div中加载了code.php，但没有“john”，我假设这是因为我使用了post方法，因此没有在php中完成post过程。你有错误吗？在firefox中按
CTRL+SHIFT+J
打开错误控制台。清除所有错误，然后运行你的程序编写代码并报告可能出现的任何错误。请记住将上述代码包含在
$（document）.ready（）中
！警告：属性选择器中出现意外标记：“！”。源文件：行：0-不知道这是什么意思。请粘贴问题中使用的JS代码？或将整个HTML文件粘贴到PasteBin中虽然我只有1个表单标记，但我有大约15个输入字段，具有不同的名称值，这会破坏代码。显然，我会尝试工作有了它，@usr，您可以使用jquery的
serialize（）
方法将其序列化，然后PHP可以取消序列化：@JohnP不幸的是serialize生成了一个get查询。@johnhunter不，我的意思是，您可以通过post将其发送到unserialize。如果他有那么多表单fields@johnhunter为此，post={'name'：form.name.value}；如果我要在其中添加第二个名称值，我会用逗号吗？post={'name'，'age'；？虽然我只有一个表单标记，但我有大约15个输入字段，具有不同的名称值，这显然会破坏代码，我会尝试使用它。@usr您可以使用jquery的
serialize（）
方法将其序列化，然后PHP可以取消序列化：@JohnP不幸的是serialize生成了一个get查询。@johnhunter否，我的意思是您可以通过post将其发送到unserialize。如果他有那么多表单fields@johnhunter对于这个，post={'name'：form.name.value}；如果我在其中添加第二个name值，我会