Wie bekomme ich POST-Daten mit JQuery AJAX

Question

Ich versuche, einfache Daten mit AJAX POST. Mein HTML-Code ist

<input type="text" value="myvalue" id="sweet" name="sweet"> 
<button type="submit" id="mybtn-1"> 

Mein JQuery-Code ist

$('#mybtn-1').click(function(){ 

    var newSweet = $('#sweet').val(); 
    if($.trim(newSweet) !== '') 
    { 
    $.ajax({ 
     url:"../test_chat.php", 
     method:"POST", 
     data:{sweet:newSweet}, 
     dataType:"text", 
     success:function(data){ 
      $('#test_wrap').load("../test_chat.php").fadeIn("slow"); 
      alert('Success'); 
     } 
    }); 
    } 
}); 

Und mein test_chat.php Code ist

<?php 
    echo $_POST["sweet"]; 
    echo 'hello'; 
?> 

ich die POST-Daten in einem div mit dem Namen „test_wrap Echo wollen ". Das Problem ist nach dem Klicken auf den Button, ich kann nur "hallo" auf der Seite Echo.

Ich weiß, es passiert, weil die Ladefunktion die PHP-Datei neu lädt, aber ich suche nach einer Lösung, so dass ich die POST-Daten auf meiner Seite anzeigen kann.

Dank

Answer 1

Sie brauchen nicht mit PHP Echo, können Sie es aus dem jQuery Erfolg Rückruf direkt angezeigt werden:

$.ajax({ 
    url: "../test_chat.php", 
    method: "POST", 
    data:{ 
     sweet: newSweet 
    }, 
    success: function(data) { 
     $('#test_wrap').load("../test_chat.php").fadeIn("slow"); 

     if (data !== null && data !== undefined) { 
      alert('Success'); 

      // Here "data" is whatever is returned from your POST 
      $("#some_content").html(data); 
     } 
    } 
}); 

Answer 2

Sie können die Daten direkt aus Ihrer test_chat.php Datei nach der Rückkehr Anfrage ist, dass keine Notwendigkeit für Doppel Anfrage hier, Rückgabedaten wie:

<?php 
    return $_POST["sweet"].' \n hellow'; 
?> 

hängen sie ihn dann an die div #test_wrap wie:

$('#mybtn-1').click(function(){ 
    var newSweet = $('#sweet').val(); 

    if($.trim(newSweet) !== ''){ 
     $.ajax({ 
      url:"../test_chat.php", 
      method:"POST", 
      data:{sweet:newSweet}, 
      dataType:"text", 
      success:function(data){ 
       $('#test_wrap').html(data).fadeIn("slow"); 

       alert('Success'); 
      } 
     }); 
    } 
}); 

Hoffe, das hilft.

Answer 3

tun Ajax-Request dieser Art und Weise in js-Datei:

$.ajax({ 
      data: {keys: values}/*keys you need to post (sweet: newsweet)*/ 
      , type: 'post' 
      , dataType: 'json' 
      , url: './php/someFile.php' 
      , error: function (jqXHR, status, err) { 
       console.log(jqXHR, status, err); 
      } 
      , success: function (response) { 
       /*use response to innerHTML into a div here*/ 
      } 
     }); 

Verwendung Echo json_encode in php:

<?php 
    echo json_encode($_POST["sweet"] /*or some value from function in php*/);/*of this way, you can return a response 
    from server to client, echo just print something, but does not return...*/ 
?>