Ajax JQuery 成功功能不起作用答案

【问题标题】：Ajax JQuery success function not workingAjax JQuery 成功功能不起作用
【发布时间】：2014-11-05 15:02:01
【问题描述】：

我不确定出了什么问题，但由于某种原因，Ajax 中的成功函数没有调用该函数。我要求它在 PHP 完成后调用。

对于 PHP，我有 $test = 'Hi'; echo json_encode($test);

这是我的主页代码：

<?php
    session_start();
    if(!isset($_SESSION["b2_in"])){
        header("Location: b2.php");
    }
?>

<script>

$(document).ready(function(){   
    $("form input:submit").click(function() {
        $.ajax({
            type: "POST",
            url: 'b2_send.php',
            data: $('form').serialize(),
            dataType: 'json',
            //beforeSend: function(){ $("#send").val('Sending...');},
            success: function(data) {
                TestFunction();
            },
            statusCode: {
                403: function(e) {
                    $("say").highlight();
                    $("#message").html(e.responseText);
                }
            }
        });
    return false;
    });
});

function TestFunction(){
    $("#message").val("");
}

</script>

<say>
    <form> 
        <input type="text" name="message" class="Message" id="message"/>
        <input type="submit" name="send" value='Say' id="send"/>
        <span id="message" style="font-weight:bold;color:red;"></span>
    </form>
</say>

【问题讨论】：

$("#message").val(""); 实际上不会做任何可见的事情。那么你怎么知道你的函数没有执行呢？
对于span，你应该使用$("#message").html("Your text");
@Jivings 当用户将数据放入#message字段时，我希望他们的数据在输入发送到数据库后消失，输入正在发送到数据库，但字段不是正在重置。
点击提交按钮后页面是否刷新？这可能会中断 javascript 的执行
只要实现textbox和span有相同的id即可。尝试更改其中之一？

标签： javascript php jquery ajax

【解决方案1】：

试试这个

span 是 DOM 的块元素，因此要为其设置数据，您需要使用 $(id).html(data); 而不是 val()

此外，你应该为 dom 中的每个元素设置不同的 id，它总是选择它在 dom 中获得的第一个 id，在你的情况下它是

<input type="text" name="message" class="Message" id="message"/> 所以它会改变这个元素的值

<script>

$(document).ready(function(){   
    $("form input:submit").click(function() {
        $.ajax({
            type: "POST",
            url: 'b2_send.php',
            data: $('form').serialize(),
            dataType: 'json',
            //beforeSend: function(){ $("#send").val('Sending...');},
            success: function(data) {
                TestFunction();
            },
            statusCode: {
                403: function(e) {
                    $("say").highlight();
                    $("#message").html(e.responseText);
                }
            }
        });
    return false;
    });
});

function TestFunction(){
    $("#message").html("");
}

</script>

【讨论】：

页面上还有重复的ID，会导致无法正常工作。