jQuery AJAX $ .post() issue

-1

Я хочу, чтобы моя страница вернула результат из кода PHP без обновления страницы, но перенаправляет меня на страницу. Мне все кажется прекрасным, но я, очевидно, что-то пропустил.

HTML код:

<html> 
    <body> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"> </script> 
    <script src="my_script.js" type="text/javascript"></script> 
     <form action="bet_process.php" method="POST" id="myForm"> 
    <h2 class="title">Betting Settings<span class="line"></span></h2> 
    <div class="form-box"> 
<label for="bet">Bet Amount</label> 
    <input type="text" name="bet" id="bet" class="text" placeholder="Amount"> 
</div> 
<div class="form-box"> 
<label for="pay">Multiplier </label> 
<input type="text" class="text" name="pay" id="pay"> 
</div> 
<div class="form-box last"> 
<label for="profit">Profit </label> 
<input type="text" name="profit" id="profit" class="text" placeholder="Profit"> 
    </div><!-- End Box --> 
<div class="clearfix"></div> 
<div class="form-box"> 
<label for="chance">Win Chance (%)</label><input type="text" name="chance" id="chance" class="text" value="50" placeholder="Win % - 50.5% Default"> 
</div> 

      <p>Slide to choose win chance or enter it in the input!</p><br><input type="range" id="chanceslider" class="vHorizon" step="0.01" min="0.01" max="98" style="background-color: #00aec8; width: 50%;"> 
</div> 





<div class="form-box"> 
    <input type="submit" name="start1" class="button medium color" value="Roll Dice" id="sub"> 
    </div><!-- End Box --> 
<span id="result"></span> 
</div> 


</form> 
</body> 
</html>

PHP код:

<?php 

require 'db.php'; 
$uid = $_SESSION['uid']; 
$rand = rand(100, 10000)/100; 
$select_gg_amt = mysql_query("SELECT * FROM `users` WHERE `username` = '$uid'"); 
$select_gg_row = mysql_fetch_array($select_gg_amt); 
$balance = $select_gg_row['balance']; 
$amount1 = $_POST['profit']; 
$amount2 = $_POST['bet']; 
$time_ago = date("F j, Y, g:i a"); 
if(isset($_POST['start1'])) { 

if(isset($_POST['bet'], $_POST['pay'], $_POST['profit'], $_POST['chance'])) { 

    if($balance > 0 && $_POST['bet'] > 0) { 

     if($_POST['bet'] <= $balance) { 

    if($rand < $_POST['chance']) { 

echo '<h3>You rolled a <strong>' .$rand. ' </strong> out of 100 on the percentile dice! You won!</h3>'; 
$result = 'Win'; 

mysql_query("UPDATE `users` SET `balance` = `balance` + '$amount1' WHERE `username` = '$uid'"); 
mysql_query("INSERT INTO `bets`(`amount`, `time_ago`, `username`, `multiplier`, `roll`, `result`) VALUES ('$amount2', '$time_ago', '$uid', '{$_POST['pay']}', '$rand', '$result')"); 

} 

else if($rand > $_POST['chance']) { 
    echo '<h3>You rolled a <strong>' .$rand. '</strong> out of 100 on the percentile dice! You lost...</h3>'; 
    $result = 'Loss'; 
    mysql_query("UPDATE `users` SET `balance` = `balance` - '$amount2' WHERE `username` = '$uid'"); 
    mysql_query("INSERT INTO `bets`(`amount`, `time_ago`, `username`, `multiplier`, `roll`, `result`) VALUES ('$amount2', '$time_ago', '$uid', '{$_POST['pay']}', '$rand', '$result')"); 

} 

} 
else { echo '<h3>You can only bet an amount you\'re capable of paying for!</h3>'; } 
} 
else if($amount2 > 0) { echo '<h3>You need to have a <strong>balance</strong> greater than 0 to bet. Sorry!</h3>'; } 
} 

} 

?>

JavaScript код:

$("#sub").click(function() { 
$.post($("#myForm").attr("action"), 
    $("#myForm :input").serializeArray(), 
    function(info){ $("#result").html(info); 
}); 
clearInput(); 
}); 

$("#myForm").submit(function() { 
return false;  
}); 

function clearInput() { 
$("#myForm :input").each(function() { 
    $(this).val(''); 
}); 
}

источник

2013-07-06 Chuck Bartowski

Вам действительно нужно сделать отступ код правильно, в противном случае это почти нечитаемым.

Замените JavaScript с:

$(function() { 
    $("#myForm").on('submit', function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url : $(this).attr('action'), 
      data: $(this).serialize() 
     }).done(function(info) { 
      $('#result').html(info); 
     }).fail(function(a,b,c) { 
      console.log('an error occured'); 
      console.log(a); 
      console.log(b); 
      console.log(c); 
     }); 
     $(":input", this).not('#sub').val(''); 
    }); 
});

Передать событие формы будет надлежащее событие, и, как это срабатывает, когда кнопка отправки нажата, вам не нужен обработчик событий для кнопки ,

Я добавил метод fail(), так как нам сложно протестировать ваш материал PHP и базы данных, но по крайней мере вы получите сообщение об ошибке, если оно не удастся?

EDIT:

Если это ваша разметка, точно так же как в вопросе, вам не хватает раздел всей головы, и скрипты загружаются в разделе BODY.

Вам необходимо как минимум добавить метки HEAD и заголовок.

источник

2013-07-06 01:41:39 adeneo

Извините, я как бы испортил все это, форматируя его, чтобы показать на stackoverflow. Должен ли я заменить весь скрипт на этот код? –

Да, все в вопросе может быть заменено приведенным выше JS – adeneo

@ChuckBartowski - на самом деле, я сделал некоторые изменения, попробуйте прямо сейчас! – adeneo

ответ

Смежные вопросы