如何使用Ajax刷新PHP文件本身？

Question

Alright guys I'm trying to make a filter system for posts using ajax and a select box. I am able to get the value from the select box no problem. But my issue is that when I try to include the selected value in my PHP file it doesn't do anything. I have a file called public_wall.php. This file contains PHP, Javascript, and HTML. How can I refresh this div whenever a user selects a different filter option? Basically I need the selected value to be passed onto my public_wall.php file and then I want to plug it into the PHP function that fetches the posts thats's in the same file and then I want to refresh that same file to display the filtered results. Here is my Javascript code.

$("#postRatings").on("click", function(e) {
selectedRatingFilter = $("#postRatings option:selected").val();
    var dataString = "timeFilter="+selectedRatingFilter;    
    jQuery.ajax({
        type: "POST",
        url: site_url+"public_wall.php",
        data: dataString,
        dataType: "json",
        cache: false,
        success: function(response){
             hideSpinner();
             jQuery('#postsPagingDiv').remove();
             jQuery('#wsc_midbox').html(jQuery(response.htmls).fadeIn(400));
             setpost_ids(response.all_post_id);
             jQuery('#paging_in_process').val(0);   
        }
    });
});

When the dataType is set to "json" nothing happens. But when it is set to html it prints some javascript code. Please help. The PHP file is too large to include here, but it basically contains PHP, HTML, and Javascript and some PHP functions that do sql queries. What is the best way to achieve a filter mechanism for my setup?

And on the public_wall.php file I want to get the value like so:

$ratingFilter = isset($_REQUEST['timeFilter']) ? intval($_REQUEST['timeFilter']) : 0;

And then plug it into the PHP function that fetches the posts which is in the public_wall.php file also so that I can filter the posts based on the selected value. And then finally I want to refresh the public_wall.php file with the new results. I hope that makes sense. Please help.

This is the output when I set my dataType to "html"

    <script>
        function refreshPosts() {/* only posts comments likes and count updated. */ 
            var posts = jQuery("#all_post_id").val();   
            var arrays = posts.split(',');
            var dataString = "postids="+posts;



   jQuery.ajax({
        type: "POST",
        url: site_url+"includes/update_wall.php",
        data: dataString,
        dataType: "json",
        cache: false,
        success: function(response) {
            var x = response;
            //############ skip posts whose comments are being read by users
            var ExemptedPostsIDs = jQuery("#exemptedPostsID").val();


            var ExemptedArray    = ExemptedPostsIDs.split(',');
            ExemptedArray = ExemptedArray.sort();
            //////////////
            for (i=0; i<arrays.length; i++) {
                var val = 'row'+arrays[i];
                if(x[val]) {
                    if(!inArray(arrays[i], ExemptedArray))                                      
                    jQuery("#ajax_wall_"+arrays[i]).html(x[val]);
                } else {
                    jQuery('#PostBoxID'+arrays[i]).parent().fadeOut(500);
                }
            }
        }
    });
}
function inArray(needle, haystack) {
    var length = haystack.length;
    for (var i = 0; i < length; i++) {
        if(haystack[i] == needle) return true;
    }
    return false;

}
function refreshWall() {/* loads new posts real time */
    var posts = jQuery("#all_post_id").val();   
    var pageUsing = jQuery('#pageUsing').val();
    var dataString = "update_posts=1&postids="+posts+'&pagex='+pageUsing;
    jQuery.ajax({
        type: "POST",
        url: site_url+"public_wall.php",
        data: dataString,
        dataType: "json",
        cache: false,
                success: function(response) {
                    if(response.all_post_id) {
                        jQuery('#wsc_midbox').prepend(jQuery(response.htmls).fadeIn(400));
                        setpost_ids(response.all_post_id);
                    }
                }
            });
        }
    </script>

Answer 1

I suggest you keep the form with select element and any JavaScript on the outer frame.

Via ajax, only load the results to a seperate DIVision below that.

When you put an Ajax response to a div, any JavaScript inside it will not be executed.

For the best throughput with Ajax, you should consider loading a json response via Ajax and create HTML elements on the client side. That way it becomes much easier to pull additional variables to front-end JS from server side along with the same request/response.

But that becomes bit difficult when you have a template engine in the back-end. You can still send the HTML content in a json value, so you can easily pass the "all_post_id" as well..