使用AJAX表單提交來提交和從MySQL檢索數據

Question

基本上，我正在努力做到這一點，以便在將帖子提交到我的網站時，它使用AJAX發送該帖子，以使它們不會更改頁面，然后，如果AJAX帖子成功，則檢索表示的所有帖子MySQL的用戶並將其寫入頁面。

我的問題是瀏覽器（Chrome，IE）完全忽略了AJAX請求。

我的表格：

<div id="updatestatus">
                    <form action="" method="post" id="ps">
                        <textarea name="status" id="status"></textarea>
                        <input type="hidden" name="uid" id="uid" value="<?php echo $uid; ?>" />
                        <input type="submit" id="poststatus" name="poststatus" value="Share" />
                    </form>
                </div>

我的AJAX請求：

$(function() {  
$("#poststatus").click(function() {  
    var status = $("textarea#status").val();  

    if (status == "") {  
    return false;  
    }

    var uid = $("input#uid").val();  
    var dataString = 'status='+ status + '&uid=' + uid;  

    $.ajax({  
        type: "POST",  
        url: "updatestatus.php",  
        data: dataString,  
        success: function() {  
            $.ajax({                                      
                url: 'ajax/query.php',         
                data: "uid=<?php echo $uid; ?>",        
                dataType: 'json',                
                success: function(data) {
                    var status = data[0];              
                    var sid = data[1];          
                    $('#mainprofile').html("<div id='statuses'><p>"+status+"</p></div>);
                    return false;  
                }  
            });  
        return false;  
        });  
    });
});
});

我的ajax / query.php請求

<?php 

  //connect stuff

    $uid = strip_tags(stripslashes(htmlspecialchars(htmlentities(mysql_real_escape_string($_GET['uid'])))));

  $result = mysql_query("SELECT * FROM mingle_status WHERE uid = '$uid' ORDER BY timestamp DESC");          //query
  $array = mysql_fetch_row($result);                          //fetch result    
  echo json_encode($array);

?>

在此先感謝您的幫助-喬

Answer 1

在本節JS代碼中

$.ajax({  
    type: "POST",  
    url: "updatestatus.php",  
    data: dataString,  
    success: function() {  
        $.ajax({                                      
            url: 'ajax/query.php',         
            data: "uid=<?php echo $uid; ?>",        
            dataType: 'json',                
            success: function(data) {
                var status = data[0];              
                var sid = data[1];          
                $('#mainprofile').html("<div id='statuses'><p>"+status+"</p></div>);
                return false;  
            }  
        });  
    return false;  
    });  
});

您需要刪除最后一個返回false之后的花括號后的結尾括號，例如...

$.ajax({  
        type: "POST",  
        url: "updatestatus.php",  
        data: dataString,  
        success: function() {  
            $.ajax({                                      
                url: 'ajax/query.php',         
                data: "uid=<?php echo $uid; ?>",        
                dataType: 'json',                
                success: function(data) {
                    var status = data[0];              
                    var sid = data[1];          
                    $('#mainprofile').html("<div id='statuses'><p>"+status+"</p></div>");
                    return false;  
                }  
            });  
        return false;  
        };  
    });

Answer 2

Try this

$(function() {  
$("#poststatus").click(function() { 
    var status = $.trim($("#status").val());  

    if (status == "") {  
    return false;  
    }

    var uid = $("#uid").val();  
    var dataString = 'status='+ status + '&uid=' + uid;  

    $.ajax({  
        type: "POST",  
        url: "updatestatus.php",  
        data: dataString,  
        success: function() {  
            $.ajax({                                      
                url: 'ajax/query.php',         
                data: "uid="+<?php echo $uid; ?>,      
                dataType: 'json',                
                success: function(data) {
                    var status = data[0];              
                    var sid = data[1];          
                    $('#mainprofile').html("<div id='statuses'><p>"+status+"</p></div>);
                    return false;  
                }  
            });  
        return false;  
        }  
    });
});
});