Question

首先，如果我的英语不完全正确，我很抱歉。我正在学习使用json，我想尝试使用这个简单的代码，我在其中插入 name 和 surname ，并使用Ajax将它们发送到json struct然后显示他们在一张桌子里。的 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);
?>

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

Answer 1

当您提交表单时，它会重新加载所有页面，因此指定的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");
        }
    });
});

Answer 2

在提交表单时，默认情况下会重新加载页面。我们可以通过在事件对象上调用.preventDefault()或从我们的处理程序返回false来取消提交操作。详细了解.submit()事件。

1.在ajax调用后使用返回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({
        ....
        ....
    });
});

Answer 3

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提交表单，然后在代码中禁用默认提交行为。

从ajax返回数据json

3 个答案: