使用 jquery 从 div 中运行表单（插入/更新/删除）答案

【问题标题】：Run a form (insert/update/delete) from within a div using jquery使用 jquery 从 div 中运行表单（插入/更新/删除）
【发布时间】：2011-08-06 12:50:41
【问题描述】：

这是上一个问题的后续：“iframe 与 div + jquery”。我在 main.php 的 div 中加载了一个表单 (form1.php)。我希望能够在 div 中运行表单，而无需刷新 main.php 来填充数据库。这是main.php：

    <html>
    <head>
    <script type="text/javascript" src="javascript/update-div.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function() {
    $("#submit_btn").click(function(e) {
        e.preventDefault();
        $.post('form1.php', $("#form1").serialize(), function(result) { 
            $("#fc").html(result); });
        });
    </scrip>
    </head>
    <body leftmargin="0px" topmargin="0px" marginheight="0px" marginwidth="0px" bgcolor="#FFFFFF">
    <a href="javascript:ajaxpage('form1.php','fc')">form1</a>
    <br>
    <div id="fc"></div>
    </body>
    </html>

这是form1.php的代码

    <?php
    $link = mysql_connect('localhost', 'login', 'pwd');
    if (!$link) {die('Not connected : ' . mysql_error());}
    $db_selected = mysql_select_db('db_name');
    $name = strtoupper($_POST['name']);
    $birth = strtoupper($_POST['birth']);
    $act = $_POST['act'];
    if($act == "save"){
    $query="INSERT INTO `mnl_people` ( `name` , `birth`) VALUES ('$name', '$birth')";
    mysql_query($query);
    $idalbum=mysql_insert_id();
    }
    if(!empty($name)){
    $html = "<p>Your name: <b>".$name."</b></p>";
    $html .= "<p>Your birthplace: <b>".$birth."</b></p>";   
    echo("$html");
    }
    else{ ?>
    <form name="form1" enctype='multipart/form-data'>
    Name <input type='text' name='name' value=""><br>
    <br/>
    <br/>
    Birthplace : <input type="text" name="birth"><br/>

    <input type='submit' name='act' class='submit' value='save' id="submit_btn"/>
    </form>
    <?php
    }
    ?>

不幸的是，在提交点击时，main.php 会刷新并显示以下网址：mnl/main.php?name=Johnb&birth=us&act=save。此外，即使在表 'mnl_people' 中添加了一个新字段，name 和 birth 字段也没有值：即 $name 和 $birth 似乎是空的。有人可以让我知道我做错了什么。我肯定在这里遗漏了一些东西。谢谢。

【问题讨论】：

结束脚本标签有错字应该是</script>而不是</scrip>。

标签： jquery forms html

【解决方案1】：

使用.live 版本，所以而不是

 $("#submit_btn").click(function(e) {

使用

 $("#submit_btn").live('click',function(e) {

问题在于，当您附加点击处理程序时，表单在 DOM 中不存在，因为您使用 ajax 加载它。

【讨论】：

谢谢。部分工作，现在 main.php 不刷新，只有 div 被刷新。但是，参数 $name 和 $birth 仍然是空的。还有一件事，我在一个网站上读到，delegate() 比 live() 更可取。我不记得确切的原因，并且解释非常先进（我是 jquery 初学者）。有什么想法吗？？

【解决方案2】：

您没有将表单的方法声明为POST，因此它使用GET 方法，但您尝试获取POST 值。

将属性method="POST" 添加到您的表单标签或使用$_GET['field_name'] 检索它。

【讨论】：