данные о возврате json from ajax

Прежде всего, извините, если мой английский не совсем корректен. Я научился использовать json, и я хочу попробовать с помощью этого простого кода, где я ввожу имя и фамилия и с Ajax я отправляю их в json-структуру, а затем показываю их в таблице. ajax.phpданные о возврате json from ajax

<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.Использование возвращаемого значения false после вызова ajax.

$("#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

данные о возврате json from ajax

ответ

Смежные вопросы