将 div 中的页面与 html 表单和 php 链接

Question

所以我有这个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？

本质上，我想要的是当用户单击提交按钮时，处理后的 code.php 加载到相同的 #content div 上。

因此，在我的 code.php 中，在处理输入的数据后，我想出了这样的代码，

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

所以在点击提交后，用户会看到

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

希望我没有通过重复自己使我的问题复杂化，请告诉我如果这可以通过 javascript、php 或其他方式实现。

感谢您的阅读！

Answer 1

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

更新 [3]，用于发送包含多个字段和复选框的 POST：

$('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 发送。

Answer 2

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

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

这在这里做了一些假设

1. 这假设 code.php 与您现在所在的路径相同。
2. 页面中只有一个表单。
3. 正如 @johnhunter 指出的，这个例子显然不适用于 post。您可以将帖子数据与方法一起发送。请参阅此处了解用法：http://api.jquery.com/load

编辑

这是一个小提琴示例： http://jsfiddle.net/jomanlk/J4Txg/

它替换包含 jsfiddle/net/echo/html 内容的表单区域（这是一个空字符串）。

注意 2 确保将代码包含在 $(document).ready() 中或将其包含在页面底部。不用说，您的页面中需要 jQuery 才能运行它。

Answer 3

您可能想查看 jquery 表单插件 http://jquery.malsup.com/form/#

Answer 4

以简单的方式使用

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