在div中显示PHP结果而不刷新

Question

Do you know a way to display a php result inside a div dynamically, without refreshing the page? For example, we have 2 divs: one on the top half of the page and one on the bottom of the page. The top one contains a form with 3 input fields. You type some values inside, then press a button. When you press the button, the bottom div displays the values without refreshing the page.

Answer 1

You can't do it with pure PHP because PHP is a static language. You have to use Javascript and AJAX. I recommend using a library like Zepto or jQuery to make it easy to implement like this:

<form>
    <input name="search" />
    <input type="submit" />    
</form>

<div id="div2"></div>

<script>
    // When the form is submitted run this JS code
    $('form').submit(function(e) {
        // Post the form data to page.php
        $.post('page.php', $(this).serialize(), function(resp) {
            // Set the response data into the #div2
            $('#div2').html(resp);
        });

        // Cancel the actual form post so the page doesn't refresh
        e.preventDefault();
        return false;
    });
</script>