sending values to self using jquery-ajax
may i get the jquery-ajax equivalent of this code? thanks
<html>
<head></head>
<body>
<?php开发者_如何学C
/* if the "submit" variable does not exist, the form has not been submitted - display initial page */
if (!isset($_POST['submit'])) {
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
Enter your age: <input name="age" size="2">
<input type="submit" name="submit" value="Go">
</form>
<?php
}
else {
/* if the "submit" variable exists, the form has been submitted - look for and process form data */
// display result
$age = $_POST['age'];
if ($age >= 21) {
echo 'Come on in, we have alcohol and music awaiting you!';
}
else {
echo 'You're too young for this club, come back when you're a little older';
}
}
?>
</body>
</html>
Phew, I just whipped this up:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#go").click(function() {
var age = $("#age").val();
if(age >= 18) {
document.getElementById('pre').style.display = 'none';
document.getElementById('post_good').style.display = 'block';
} else {
document.getElementById('pre').style.display = 'none';
document.getElementById('post_bad').style.display = 'block';
}
})
})
</script>
<body>
<div id="pre">
<form action="" method="post">
Enter your age: <input name="age" size="3" maxlength="2" id="age">
<input type="button" name="submit" value="Go" id="go">
</form>
</div>
<div id="post_good" style="display:none;">
Come on in, we have alcohol and music awaiting you!
</div>
<div id="post_bad" style="display:none;">
Sorry, You're too young!
</div>
</body>
</html>
I assume that you were looking for a solution that doesn't require a new pageload.
I don't want to just give you the answer without an explanation: The page simply contains all the information you wish to display, but keeps it hidden in a div. When you enter your age, the jquery simply 'unhides' the correct div.
加载中,请稍侯......
精彩评论