简体   繁体   中英

Reload a div on AJAX success

I have a div which has PHP code (it prints data from a database). I made an AJAX function to send the data to the server without refreshing the page, here's the code:

var url = "loadsave.php";

   $('.create_save').submit(function(event) {
        if ($('.gss_new_save').val()==""){
            event.preventDefault();     
        } else {
            $.ajax({
                    type: "POST",
                    url: url,
                    data: $('form').serialize(),
                    success: function()
                    {

                    }
                });
            event.preventDefault();
        }
    });

And this is the other part that prints the code. The problem is that it prints the code just when you refresh the page:

<?php
            $connect = new PDO('mysql:host=localhost;dbname=game','root','');
            $cmd = $connect->query('SELECT * FROM saves');
            $result = $cmd -> fetchAll(PDO::FETCH_ASSOC);

            foreach ($result as $res) {
                ?>
                <div class="gss_save cls">
                    <span class="gss_save_text cls"><?php echo $res['name'];?></span>
                    <span class="gss_level">lvl: <?php echo $res['level'];?></span>
                </div>
                <?php
            }
        ?>

EDIT: I add: the form:

<form method="post" action="loadsave.php" class="create_save">
            <input type="text" class="gss_new_save" name="name">
            <input type="submit" style="display:none">
        </form> 

and the content of loadsave.php:

<?php
        if (isset($_POST['name'])) {
            $nombre = $_POST['name'];   
        }

        $connect = new PDO('mysql:host=localhost;dbname=game','root','');

        $stm = $connect->query("SELECT * FROM saves WHERE `name` ='$nombre'");
        $result = $stm->fetchAll(PDO::FETCH_ASSOC);

        if(count($result)==0){
            $cmd = $connect->prepare('INSERT INTO saves (name, level) VALUES (:nombre,"1")');
            $cmd -> bindParam(":nombre",$nombre);
            $cmd -> execute();
        }
    ?>

It works like a charm but I want to refresh the div to print the content I just sent, how can I achieve this?

Assuming the script echoes the new content back:

success:function(response) {
    $("#divID").html(response);
}

loadsave.php should be:

<?php
    if (isset($_POST['name'])) {
        $nombre = $_POST['name'];   
    }

    $connect = new PDO('mysql:host=localhost;dbname=game','root','');

    $stm = $connect->query("SELECT * FROM saves WHERE `name` ='$nombre'");
    $result = $stm->fetchAll(PDO::FETCH_ASSOC);

    if(count($result)==0){
        $cmd = $connect->prepare('INSERT INTO saves (name, level) VALUES (:nombre,"1")');
        $cmd -> bindParam(":nombre",$nombre);
        $cmd -> execute();
    }

    $cmd = $connect->query('SELECT * FROM saves');
    $result = $cmd -> fetchAll(PDO::FETCH_ASSOC);

    foreach ($result as $res) {
        ?>
        <div class="gss_save cls">
            <span class="gss_save_text cls"><?php echo $res['name'];?></span>
            <span class="gss_level">lvl: <?php echo $res['level'];?></span>
        </div>
        <?php
    }

?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM