从ajax返回数据json

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

<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); 
?>

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

来源

2016-07-21 Fabio97

在提交表单时，默认会重新加载页面。我们可以通过在事件对象上调用.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.By使用event.preventDefault()

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

来源

2016-07-21 08:21:41

非常感谢！ – Fabio97

@RohanKumar答案可能对他有效，但这并不正确，也不是一个好习惯。尊重的是，为社区的最大利益做出更多努力（我假设你的代表已知道如何在不提交表单的情况下设置AJAX调用）。特别是当你要求OP将其标记为正确时，他必须继续进行的唯一标准是它是否解决了他眼前的问题。 – BobRodes

当您提交表单，将重新加载页面的所有，所以分配的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"); 
     } 
    }); 
});

来源

2016-07-21 08:30:09

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

来源

2016-07-21 17:26:30 BobRodes

从ajax返回数据json

回答

相关问题