從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

回答

相關問題