如何使用Jquery AJAX获取POST数据

Question

I am trying to POST simple data using AJAX. My HTML code is

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

My JQuery code is

$('#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');
        }
    });
   }
});

And my test_chat.php code is

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

I want to echo the POST data in a div with name "test_wrap". The problem is after clicking the button, I can only echo "hello" on the page.

I know its happening because the load function is reloading the php file but I am looking for a solution so that I can show the POST data on my page.

Thanks

Answer 1

You don't need to echo it with PHP, you can display it directly from the jQuery success callback:

$.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);
        }
    }
});