Question

我正在与这个“战斗”好几个小时，我希望你能帮我解决这个问题。所以我有一个带有空div的基本表单，然后填充：

<form method='post' action='/shoutek.php'>
<input type='text' id='shout_tresc' name='shout_tresc' class='shout_tresc' />
    <input type='submit' id='dodaj' value='Dodaj' />
</form>

<div class='shoutboxtresc' id='shout'></div>
<span class='loader'>Please wait...</span>

shoutek.php包含提交表单后要执行的查询以及填充div的函数。

这是我的jquery：

$(function() {

    $(\"#dodaj\").click(function() {
        // getting the values that user typed

        var shout_tresc = $(\"#shout_tresc\").val();
        // forming the queryString
        var data            = 'shout_tresc='+ shout_tresc;

        // ajax call
        $.ajax({
            type: \"POST\",
            url: \"shoutek.php\",
            data: data,
            success: function(html){ // this happen after we get result
                $(\"#shout\").toggle(500, function(){
                $('.loader').show();    
                    $(this).html(html).toggle(500);
                    $(\"#shout_tresc\").val(\"\");
                $('.loader').hide();        
                });
                 return false;
          }
        });   

    });
});

问题在于它引导我到shoutek.php，因此它不会刷新ajax中的div。

正如你所看到的，我使用了return false; - 我也尝试了event.preventDefault（）;功能 - 它没有帮助。有什么问题以及如何摆脱它？如果你能为我提供一些解决方案，我们将很高兴。

修改

伙计们，我提出的实际工作，但让我知道这是否是一个正确的解决方案，并且将来不会引起问题。从上一段代码（见Luceous的答案）我删除了

$(function() {

（当然它正在关闭标签）我完全摆脱了：

<form method='post' action='/shoutek.php'>

让输入“无形”。如果这是一个很好的解决方案，请告诉我 - 它毕竟有效。

Answer 1

$(function() {

    $("#dodaj").click(function(e) {
        // prevents form submission
        e.preventDefault();
        // getting the values that user typed

        var shout_tresc = $("#shout_tresc").val();
        // forming the queryString
        var data            = 'shout_tresc='+ shout_tresc;

        // ajax call
        $.ajax({
            type: "POST",
            url: "shoutek.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#shout").toggle(500, function(){
                $('.loader').show();    
                    $(this).html(html).toggle(500);
                    $("#shout_tresc").val("");
                $('.loader').hide();        
                });
                 return false;
          }
        });   

    });
});

为了便于阅读，我删除了你的逃脱。您错过了妨碍表单提交的preventDefault。

Answer 2

您需要阻止提交按钮单击时的默认操作：

$("#dodaj").click(function(event) {
    event.preventDefault();
    // your code
}

刷新div而不重新加载不工作

2 个答案: