在PHP循环中的JQuery Post工作并不完美

问题描述：

I have following list.php that creates a list with items and a button (Erledigt!) that send a Jquery Post to wishdelete2.php. The problem is that the JQuery post works not perfect: One time I need to press the button 3x or 5x and than the Jquery processed. But I want that I only need 1x and the Jquery post is processed. What must I change?

list.php:

<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Wünsche</title>
<!-- <script src="../jquery.min.js"></script> -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<style>
table{
        width:100%; 
        border-collapse:collapse; 
}
table th{
    padding:5px; 
    border:#5f5f5f 1px solid;

}
table td{
    padding:5px; 
    border:#5f5f5f 1px solid;
}
table tr{
    background: #bbbbbb;
}
table tr:nth-child(4n){
    background: #e3e3e3;
}
</style>

</head>
<div id="resulter"></div>
<body>
<h3>Wünsche</h3>
<table>
<tr><th>Zeit</th><th>IMDB-ID</th><th></th><th></th><th>Counter</th><th>Titel</th><th>Art</th></tr>
<?php
$pdo = new PDO('mysql:host=********;dbname=********;charset=utf8', '********', '********');
$sql = "SELECT * FROM ******** WHERE not marker = 'oU' ORDER BY cast(counter as int) DESC, timestamp ";
foreach($pdo->query($sql) as $row) {
$id = $row['id'];
$timestamp = $row['timestamp'];
$counter = $row['counter'];
$art = $row['art'];
$imdbid = $row['imdb_id'];

$title = $row['title'];
$language = $row['language'];
$aufloesung = $row['aufloesung'];
$marker = $row['marker'];
?>
<tr><td><?php echo $timestamp ?></td><td><?php echo $imdbid ?></td><td><?php echo $language ?></td>
<td><?php echo $aufloesung ?></td><td class="counter"><?php echo $counter ?></td><td class="title" style=""><?php echo $title ?></td><td><?php echo $art ?></td><td><?php echo $marker ?></td>
<td style="padding:0;"><button class="<?php echo $id ?>">Erledigt!</button>
<select class="marker<?php echo $id ?>"><option></option><option>oD</option><option>oDwE</option><option>wE</option><option>oE</option><option>oU</option></select></td></tr>
<script>
 $(document).ready(function(){
    $(".<?php echo $id ?>").click(function(){
        var id = "<?php echo $id ?>",
        marker =  $(".marker<?php echo $id ?>").val();
        $.post("wishdelete2.php", 
            { id:  id,
            marker: marker
            });
        location.reload();
    });
});
</script>
<?php } ?>
</table>

</body>
</html>

and wishdelete2.php:

<?php
$con=mysqli_connect("********","********","********","********");
$id = mysqli_real_escape_string($con, $_POST['id']);
$marker = mysqli_real_escape_string($con, $_POST['marker']);
mysqli_close($con);

$pdo = new PDO('mysql:host=********;dbname=********;charset=utf8', '********', '********');
if(empty($marker)){
$stmt = $pdo->query("DELETE FROM ******** WHERE id='$id' ");
}else{
$stmt = $pdo->query("UPDATE ******** SET marker='$marker', IP='' WHERE id='$id' ");
}
?>

答

jQuery.post is an asynchronous function, i.e. the request will not have been sent once this function returns. The problem is that you call location.reload() right after calling post, so in most cases your request will not have been sent before your browser has reloaded the page. If you want to reload the page after the post request has been sent, pass a handler to post, e.g. to the success event.

As explained in the documentation of jQuery.post, you can simply pass a function after your data, like so:

$.post(
    "wishdelete2.php", 
    {id: id, marker: marker},
    function () { location.reload(); }
);

Note that this handler is a success handler and thus will only be called, if the post request succeeds. You may want to have a look at the linked documentation and provide an error handler to inform the user of a failure, if necessary.

Also, you should think of adding some indication that the page is waiting for the post request. You can google for loading spinners to find the commonly used animated graphics indicating that there's a script loading something in the background. Of course displaying such a spinner is only one way of indicating this. Be creative.

在PHP循环中的JQuery Post工作并不完美

相关推荐