$ _SESSION ['var']不会使用ajax设置

Question

我有一个奇怪的问题。我试图设置一些会话变量，他们不会通过我的ajax调用设置。

这是我的代码

HTML

<form id="sjcc_payment" onsubmit="return concatExp();" action="https:www.url.com" method="POST">

                <table width="100%">
                    <tr>
                        <td style="font-family:Tahoma,Geneva,sans-serif;color:#888888">Name</td>
                    </tr>
                    <tr>
                        <td><input type="text" id="first_name" name="first_name" ></td>
                    </tr>
                    <tr>
                    <tr>
                        <td style="font-family:Tahoma,Geneva,sans-serif;color:#888888">Email</td>
                    </tr>
                    <tr>
                        <td><input type="text" id="email" name="email" ></td>
                    </tr>
                    <tr>
                        <td style="font-family:Tahoma,Geneva,sans-serif;color:#888888">Payment for:</td>
                    </tr>
                    <tr>
                        <td><input type="text" id="payment_for" name="payment_for" ></td>
                    </tr>
                    <tr>
                        <td style="font-family:Tahoma,Geneva,sans-serif;color:#888888">Payment Amount: </td>
                    </tr>
                    <tr>
                        <td><input type="text" id="total" name="Total" ></td>
                    </tr>
                </table>

                <h2 style="color:#555">Please Enter Your Payment Information</h2>
                <table width="300" style="float:left">
                        <td >
                            Card Type
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <input type="radio" name="CardType" value="VISA" checked> <img width='80px' src='/media/media/images/cardVisa.png' /><br>
                            <input type="radio" name="CardType" value="MC"> <img width='80px' src='/media/media/images/cardMC.png' />

                        </td>
                    </tr>
                    <tr>
                    <tr>
                        <td >
                            Credit Card #
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <input type="text" placeholder="CC #" name="Card" id="Card" value="">
                        </td>
                    </tr>
                    <tr>
                        <td width="20%">
                            Exp.
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="text" style="width:60px;float:left;" placeholder="MM" name="expMonth" maxlength="2" id="expMonth" value=""> 
                            <div style="float:left;padding:10px 5px 0px 5px; font-size:18px;"> / </div> 
                            <input type="text" style="width:60px;float:left;"   placeholder="YY" name="expYear" maxlength="2" id="expYear" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            CVV
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" placeholder="CVV" style="width:70px;float:left;" name="cvv" id="cvv" value="">
                        </td>
                    </tr>
                    <tr height="55px">
                        <td  valign="bottom">
                            <a class='pay-button'>Submit Payment</a>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            <p>&nbsp;</p>
                        </td>
                    </tr>
                </table>    

             </form>

我的ajax电话

(function ($) {
    $(document).on ('click', '.pay-button', function() {

        var name = document.getElementById("first_name").value;
        var email = document.getElementById("email").value;
        var paymentFor = document.getElementById("payment_for").value;
        var paymentAmount = document.getElementById("total").value;

        console.log (email);
        //is the correct email.

        $.ajax({
            type:'POST',
            url: '/setSession.php',
            data: { name:name, email:email, paymentFor:paymentFor, paymentAmount:paymentAmount},
            success: function(data) {
                console.log(data);
                //is the correct $email.

            }
        });


    });
}(jQuery));

在我的setSession.php

中

<?php
//initialize the session
session_start();

$date = date('Ymdhis');
$name = $_POST['name'];
$email = $_POST['email'];
$paymentFor = $_POST['paymentFor'];
$paymentAmount = $_POST['paymentAmount'];

$_SESSION['invoice'] = $date;
$_SESSION['ec_name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['payment_for'] = $paymentFor;
$_SESSION['payment_amount'] = $paymentAmount;

echo $email;

?>

现在当我重新加载页面时..会话未设置。