在php和ajax中发布和回显数据

时间:2018-06-13 13:38:23

标签: php ajax post echo

页面包含div形式的2个步骤,每个div用id step1,step2提到。我希望当我点击步骤1的按钮(名为step1button)时,步骤2中的数据将出现在步骤1发布但使用ajax的数据的基础上。

现在的问题是,当我通过ajax发布数据时,Php代码会在此之后运行,但变量值不会出现在页面上的step2中,而是出现在网络预览中的检查模式中。值显示。

代码在这里

<!DOCTYPE html>
<html>
<head>
    <script src="plugins/jquery/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="step1">
    <select id="coursename" name="coursename">
        <option>BCA</option>
        <option>BBA</option>
    </select>
    <select id="session" name="session">
        <option>2016</option>
        <option>2017</option>
    </select>
    <button type="button" id="step1button" name="step1button">NEXT</button>
</form>
<div  id="step2">
    <h2>STEP-2</h2>
    <?php
    if (isset($_POST['step1'])) {
        $coursename = $_REQUEST['coursename'];
        $session= $_REQUEST['session'];
        $startdate= $session.'-'.'8';
        $enddate=date('Y-m');
        $storestartdate=strtotime($startdate);
        $storeenddate=strtotime($enddate);
        $monthdiff= 0;
        while (($storestartdate = strtotime('+1 MONTH', $storestartdate)) <= $storeenddate){
            $monthdiff++;
        }
        switch ($monthdiff) {
            case $monthdiff < 5:
            $semester=1;
            break;
            case $monthdiff < 11:
            $semester=2;
            break;
            case $monthdiff < 17:
            $semester=3;
            break;
            case $monthdiff < 23:
            $semester=4;
            break;
            case $monthdiff < 29:
            $semester=5;
            break;
            case $monthdiff < 35:
            $semester=6;
            break;
        }
    }
    ?>
    <div>CLASS <?php echo $coursename.$semester?></div>
    <div>SESSION <?php echo $session?></div>
</div>
    <script>
        $(document).ready(function(){
            $("#step1").show();
            $("#step2").hide();
            $("#step3").hide();
            $("#step1button").click(function(){
                var coursename = $("#coursename").val();
                var session = $("#session").val();
                console.log(coursename);
                console.log(session);
                if(coursename=="" || session==""){
                    $("#alert").html("<div class='alert bg-pink'>Please select coursename and session</div>");
                    $("#coursename,#session").css('border-bottom','2px solid #E91E63');
                }
                else{
                    $.ajax({
                        method:'POST',
                        data:{step1:1,coursename:coursename,session:session},
                        success:function(){
                            $("#step2").show();
                            $("#step1").hide();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您只能使用ajax发布值,但不要评估响应。那不是ajax如何运作。

当前第一次重新呈现页面时,将执行每个三个步骤的内容。但是,由于您只设置$coursename$step,因此在发送$_POST['step1']时,会计算出未定义的变量错误。

那么你怎么能解决这个问题呢?有两种选择(可能更多......)

  1. ajax请求在其响应中返回step2 / 3的内容,并在js success - 函数

  2. 中替换它
  3. 使用虚拟字段预渲染其他步骤,ajax响应包含json数据,可用于使用实际内容填充虚拟字段。这也必须在success - 函数。

  4. 中完成

    在每种情况下,如果你想使用ajax,你也要关心你的ajax请求的响应。