从ajax返回数据json - return data json from ajax

首先，如果我的英语不完全正确，我很抱歉。我正在学习使用json，我想尝试使用这个简单的代码，在这里我插入名称和姓氏，并使用Ajax将它们发送到json结构中，然后在表中显示它们。ajax.php

<form id="iscrizione">
    Nome: <input type="text" id="nome" /><br />
    Cognome: <input type="text" id="cognome" /></br >
    <input type="submit" id="invia" value="ISCRIVITI" />
</form>
<table>
    <tr><td>Nome: </td><td><span id="td_nome"></span></td></tr>
    <tr><td>Cognome: </td><td><span id="td_cognome"></span></td></tr>
</table>
<script type="text/javascript">
    $("#iscrizione").submit(function(){
        var nome = $("#nome").val();
        var cognome = $("#cognome").val();
        $.ajax({
            url: "json.php",
            type: "POST",
            data: {nome: nome, cognome: cognome},
            dataType: "json",
            success: function(msg){
                $("span#td_nome").html(msg.nome);
                $("span#td_cognome").html(msg.cognome);
            },
            error: function() {
                alert ("Chiamata Fallita");
            }
        });
    });
</script>

json.php

<?php
header("Content-Type: application/json", true);
$dati = array( 'nome'=>$_POST['nome'], 'cognome'=>$_POST['cognome'] );
echo json_encode($dati);
?>

错误在哪里？因为输出只显示一秒钟，然后它们就会消失。谢谢大家。

当您提交表单时，它将再次重新加载所有页面，因此分配的html仅在短时间内可见。

使用preventDefault（）函数来克服这种情况。

<script type="text/javascript">
$("#iscrizione").submit(function(event){
    event.preventDefault()
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
        url: "json.php",
        type: "POST",
        data: {nome: nome, cognome: cognome},
        dataType: "json",
        success: function(msg){
            $("span#td_nome").html(msg.nome);
            $("span#td_cognome").html(msg.cognome);
        },
        error: function() {
            alert ("Chiamata Fallita");
        }
    });
});

在提交表单时，默认情况下会重新加载页面。我们可以通过对事件对象调用.prventDefault（）或从处理程序返回false来取消提交操作。阅读有关.submit（）事件的更多信息。

1.在ajax调用后使用return false。

$("#iscrizione").submit(function(){
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
        ....
        ....
    });
    return false; // add return false here
});

2.使用event.preventDefault()

$("#iscrizione").submit(function(event){
    event.preventDefault();// use preventDefault() on event
    var nome = $("#nome").val();
    var cognome = $("#cognome").val();
    $.ajax({
        ....
        ....
    });
});

return false或preventDefault()都可以，正如其他两个答案所描述的那样。然而，重要的是要明白，你根本不必提交表单，而且这样做确实不是最佳实践。毕竟，使用HTML提交表单，然后在代码中禁用提交行为没有多大意义。尤其是当你不需要的时候。

AJAX的发明是为了克服重新加载页面时出现的问题（比如您的问题）。AJAX的要点是，它让你能够在不重新加载的情况下用新数据更新页面

因此，做您想要做的事情的更干净的方法是将您的按钮简化为一个按钮，并从按钮的click事件调用您的代码。看看这个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Test
    </title>
    <!--jQuery file-->
    <script src="includes/jquery/jquery-2.2.3.js"></script>    
    <script type="text/javascript">
        $(document).ready(function () {
            function showMyPHP() {
                var nome = $("#nome").val();
                var cognome = $("#cognome").val();
                $.ajax({
                    url: "json.php",
                    type: "POST",
                    data: {nome: nome, cognome: cognome},
                    dataType: "json",
                    success: function(msg){
                        $("#td_nome").html(msg.nome);
                        $("#td_cognome").html(msg.cognome);
                    },
                    error: function() {
                        alert ("Chiamata Fallita");
                    }
                });
            }
            $('#invia').on('click', function(e, ui){
                showMyPHP();
            });
        });
    </script>
</head>
<body>
<form id="iscrizione">
    Nome: <input type="text" id="nome" /><br />
    Cognome: <input type="text" id="cognome" /></br >
    <button type="button" id="invia">"ISCRIVITI"</button>
</form>
<table>
    <tr><td>Nome: </td><td><span id="td_nome"></span></td></tr>
    <tr><td>Cognome: </td><td><span id="td_cognome"></span></td></tr>
</table>
</body>
</html>

你可以看到我们根本没有在这里提交表格。相反，我们通过按钮的点击事件调用AJAX。您将看到您获得所需的结果，而无需使用HTML提交表单，然后在代码中禁用默认的提交行为。