Question

我正在尝试使用AJAX发布简单数据。我的HTML代码是

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

我的JQuery代码是

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

我的test_chat.php代码是

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

我想在名为＆＃34; test_wrap＆＃34;的div中回显POST数据。问题是在点击按钮后，我只能回应＆＃34;你好＆＃34;在页面上。

我知道它发生了，因为加载函数正在重新加载php文件，但我正在寻找一个解决方案，以便我可以在我的页面上显示POST数据。

由于

Answer 1

您不需要使用PHP回显它，您可以直接从jQuery成功回调中显示它：

$.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

您可以在发布请求后直接从test_chat.php文件返回数据，此处不需要双重请求，返回数据如：

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

然后将其附加到div #test_wrap，如：

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

希望这有帮助。

Answer 3

在js文件中执行这种方式的ajax请求：

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

在php中使用echo json_encode：

<?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...*/
?>

如何使用Jquery AJAX获取POST数据

3 个答案: