Question

我已经研究了一段时间了，我不确定我是否正确地采用这种方式，因为我根据示例设置的每种形式都没有做到我需要的。

我需要设置一个表单：

从下拉菜单中选择时设置会话
没有重新加载/刷新页面（我读过使用AJAX解决了这个问题）
提交并停留在SAME页面上（混淆是因为大多数AJAX示例将其发送到不同的process.php页面，该页面被认为是“不可见的”但它不会“停留”在同一页面上，它会重定向。

基本上，客户端选择1到10的数量。如果他们选择“2”......它不会重新加载页面..但它设置会话[数量] = 2。应该很简单......但是我要像表格一样张贴到同一页面吗？或POST到不同的页面，它以某种方式重定向？

另外，我做了一次测试，每次都不停地将我的“回音会话[数量]”粘贴在页面上，如7,2,3,5等等，而不是替换它。

以下代码部分来自将性别作为下拉菜单的示例。我只想将下拉列表保留为选中的任何内容，并回显提交按钮旁边的选择。这是出于测试目的，以便我了解正在发生的事情。一旦发生这种情况，我可以完成表格的其余部分。它目前不会回应任何事情。

<? ob_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php session_start(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit  Form with out refreshing page Tutorial</title>

<!-- JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var gender = $("#gender").val();
var dataString = 'gender=' + gender;
if(gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
<style type="text/css">
body{
}
.error{
color:#d12f19;
font-size:12px;
}
.success{
color:#006600;
font-size:12px;
}
</style>
</head>
<body id="public">
<div style="height:30px"></div>
        <div id="container">
                    <div style="height:30px"></div>

                    <form method="post" name="form">
                        <select id="gender" name="gender">
                        <option value="">Gender</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        </select>
                        <div>
                        <input type="submit" value="Submit" class="submit"/>
                        <span class="error" style="display:none"> Please Enter Valid Data</span>
                        <span class="success" style="display:none"> Your gender is <?php echo $_SESSION['gender'];?></span>
                        </div>
                    </form>

        <div style="height:20px"></div>
        </div><!--container-->
</body>
</html>
<? ob_flush(); ?>

这是我的页面，其中POST称为join.php（在示例中称为，所以我现在就使用它）

<?php
session_start(); 
if($_POST)
{
$gender = $_POST['gender'];
$_SESSION['gender'] = $gender;
}
else
{ }
?>

如何使用ajax创建表单，onchange事件，重新加载到SAME页面

0 个答案: