Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="./js/jquery.blockUI.js"></script>
<script>
$(document).ready(function(){
$(".menuLink").click(function(){

$('#content').block({ 
  centerY: 0, 
  css: { top: '40px', left: '', right: '10px' },
  message: '<img src="./Images/ajax_loader.gif" /><br /><h3>Loading...Please wait.</h3>' 
});

$.ajax({
type: "POST",
url: $(this).attr('href'),
cache: false,
success: function(html){ $("#content").html(html); }
});

});

$(document).ajaxStop(function(){
$('#content').unblock();

});
});
</script>

这是我在div id = menu中设置链接的代码，点击它们将php文件加载到div id = content ahref我就在这里。

<p><a class="menuLink" href="Test.php" onclick="return false;">Wall</a></p>

现在使用上面脚本的类和onclick是在div id = menu上单击该链接时，在div id = content中加载Test.php的原因。

以下是Test.php中的脚本

session_start();
include_once("connect.php");
include_once("functions.php");

if($_POST['WallSubmit'] && $_POST['Wall']){

  $wall = makesafe($_POST['Wall']);

mysql_query("INSERT INTO `Wall` (`ID`, `Username`, `MessageBy`, `Date`, `Message`) VALUES ('', '', '$username', '" . time() . "', '$wall')");

}

<form method='post'>
  <table class="default" style="width: 80%" align="center">
<tr>
  <td class="subheader">Wall</td>
</tr>
<tr>
  <td class="content">Post a comment.<br /><textarea name='Wall' id='Wall' style='width: 99%; height: 110px;'></textarea><br /><br/><center><input type='submit' value='Post' name='WallSubmit' /></center><br /><hr><br />Latest Comments.</td>
</tr>
</td>
</table>
</form>

现在我遇到的问题是，一旦我点击了菜单上的墙，因为在href中可以看到它加载到div id =内容没有任何问题所以现在Test.php显示在内容div中但是现在当我填写在Test.php上它只是刷新到默认内容页面，如果没有刷新那个默认内容那么它不会更新数据库那么点击时按钮不会做任何事情，现在我知道编码适用于数据库和因为它已经在框架布局中进行了测试，并且如果我将Test.php设置为默认内容页面也可以使用，它会将默认内容放在页面中。

<div id="content" class="auto">
           <?include_once("Test.php");?>
         </div>

这是什么解决方案？我知道这听起来令人困惑，但我只想弄清楚一旦我点击Wall on menu并将Test.php加载到div id = content如何在Test.php中获取表单来完成它的工作lol。

Answer 1

表单的操作（由于未指定）只是刷新页面并将WallSubmit和Wall提交到主页面，而不是test.php。相反，您可以像这样指定操作：

<form action='test.php' id='wallForm' method='post'>

但是，这只会将用户带到一个包含test.php内容的空白页面。相反，在javascript中，必须进行ajax调用：

$(document).ready(function() {
    ...
    $(document).on("submit","#wallForm",function(){
        $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        cache: false,
        data: {Wall: $("#Wall").val(), wallSubmit: $("[name=WallSubmit]").val()},
        success: function(html){ $("#content").html(html); }
        });
    });
    ...
});

必须调用

on()，因为表单是在DOM之后加载的。否则Javascript将无法识别它，因为它只处理加载到DOM中的内容。有关此问题的更多信息，this site包含一些有用的信息。

如果您想拥有通用表单提交功能，serialize()应该可以解决问题。 jQuery API page应该总结一下。您可以将data: {Wall: ...}替换为data: $(this).serialize()。此函数获取表单中的有效字段并将其放入可用于将数据设置为php文件的字符串中。但是，我不太确定WallSubmit名称对表单的影响。据我所知，你可以完全消除这一步。

在div = content中更新数据库的表单

1 个答案: