Question

我有一个页面，它使用ajax提交评论表单，将其添加到数据库，然后重新显示页面，希望无需重新加载页面。

如果我自己访问脚本它工作得很好，但当我将它加载到另一个页面时它不会添加数据并刷新提交页面，我想避免，这是重点这样做。

无论如何，这是我加载页面的方式：

<div id="wall_comments" class="msgs_holder"></div>


<script type="text/javascript">

    $('#wall_comments').load('/pages/comment.php', { wl_id:"<?=$wl_id?>" });

</script>

然后页面本身带有jquery代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<div style="width:100%; overflow:auto;">

<form method=post>

    <input type="text" class="inp" name="comment" id="comment"> 
    <input type=submit value="do it" name="action" onclick="update()">

    <input type=hidden name="wl_id" value="<?=$_REQUEST[wl_id]?>" id="wl_id">
    <input type=hidden name="user_id" value="<?=$userfromcookie?>" id="user_id">

</form>

</div>


<script type="text/javascript">

function update(){

    var wl_idVal = $("#wl_id").val();
    var commentVal = $("#comment").val();
    var user_idVal = $("#user_id").val();

    $.ajax({
      type: "POST",
      url: "/pages/comment.php",
      cache: false,
      data: { submit: "", wl_id: wi_idVal, comment: commentVal, user_id: user_idVal }
    });

}

</script>

最后将信息输入db（我知道这应该是mysqli，它会是）

if(isset($_POST['action'])){ 

$wl_id = mysql_real_escape_string($_POST['wl_id']);
$comment = mysql_real_escape_string($_POST['comment']);
$user_id = mysql_real_escape_string($_POST['user_id']);

$addcomment = mysql_query("insert into list_wall (
            event_id, 
            user_id,
            comment
            ) VALUES (
            '$wl_id',
            '$user_id',
            '$comment'
            )   ",$db);

if(!$addcomment) { echo 'result error add comment'; echo mysql_error(); exit; } // debug

}

Answer 1

问题是当您单击提交按钮时，页面已提交且功能更新无效。您必须使用 return false;

取消默认提交机制

<input type=submit value="do it" name="action" onclick="update() return false;">

Answer 2

另一件事。

如果在没有点击按钮的情况下导致提交，则提交按钮上的onclick将无法正常工作。

例如iPhone上的移动Safari可以直接提交表单而不会触发按钮。

如果您将onmalick的UmairP版本作为onsubmit方法添加到表单元素中，据我所知，您应该在每个平台上获得相同的结果。

您可以在另一个问题上查看有关iPhone表单的更多详细信息。

How can I prevent the Go button on iPad/iPhone from posting the form

Ajax形式完美，直到另一页内

2 个答案: