如何通过ajax增加/减少PHP变量值和重载函数

时间：2015-04-08 11:26:10

标签： javascript php jquery ajax

我有一个函数，它根据变量

指定日期

离。 $ modification =“+1周”

function calendar($modification){

    $month = array("Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December");
    $date = new DateTime(date('Y-m-d'));
    $date->modify($modification);
    $year = $date->format('o');
    $week = $date->format('W');
    $fulldate = $date->format('c');
    $valEnc = 'W';
    $monthNum = $date->format('n');
    $modDate = date('Y-m-d',strtotime($fulldate));


    $mMon = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y") ));
    $mTue = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y") ));
    $mWed = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y") ));
    $mThu = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y") ));
    $mFri = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y") ));
    $mSat = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y") ));
    $mSun = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y") ));
    $dayMonth = compact("mMon","mTue","mWed","mThu","mFri","mSat","mSun");

    $mon = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y")));
    $tue = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y")));
    $wed = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y")));
    $thu = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y")));
    $fri = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y")));
    $sat = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y")));
    $sun = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y")));
    $days = compact("mon","tue","wed","thu","fri","sat","sun");
    $weekNum = date("W", strtotime("$year$valEnc$week"));

    $mName = $month[($monthNum)-1];
    $yearNum= $date->format('Y');


    $calendar= compact("dayMonth", "days", "weekNum", "mName", "yearNum");   // $calendar['array'][value] / $calendar[value]

    //print_r($calendar);
    return $calendar;
}

如何从页面上的按钮指定$ modify然后重新加载函数？

实施例。按钮增加= +1周，按钮减少= -1周。

编辑：已解决

PHP：

$dMod = $_GET['mod'];

$mod = $dMod;


if ($dMod >= 0) {
    $mod = '+'.$dMod.'';
}


$modification = "".$mod." week";
date_default_timezone_set ("/*TIMEZONE*/");

function calendar($modification){
    $todayweek = date('W', mktime(0, 0, 0, date('m'), date("d"), date("Y") ));
    $today = date('D');
    $month = array("Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December");
    $date = new DateTime(date('Y-m-d'));
    $date->modify($modification);
    $year = $date->format('o');
    $week = $date->format('W');
    if ($todayweek==$week && $today=='Fri'){
        $date->modify($modification);
        $year = $date->format('o');
        $week = $date->format('W');
    }

    $fulldate = $date->format('c');
    $valEnc = 'W';
    $monthNum = $date->format('n');
    $modDate = date('Y-m-d',strtotime($fulldate));


    $fMon = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y") );
    $fTue = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y") );
    $fWed = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y") );
    $fThu = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y") );
    $fFri = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y") );
    $fSat = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y") );
    $fSun = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y") );
    $fulldate = compact("fMon","fTue","fWed","fThu","fFri","fSat","fSun");

    $mMon = date('n', $fMon);
    $mTue = date('n', $fTue);
    $mWed = date('n', $fWed);
    $mThu = date('n', $fThu);
    $mFri = date('n', $fFri);
    $mSat = date('n', $fSat);
    $mSun = date('n', $fSun);
    $dayMonth = compact("mMon","mTue","mWed","mThu","mFri","mSat","mSun");

    $mon = date('j', $fMon);
    $tue = date('j', $fTue);
    $wed = date('j', $fWed);
    $thu = date('j', $fThu);
    $fri = date('j', $fFri);
    $sat = date('j', $fSat);
    $sun = date('j', $fSun);
    $days = compact("mon","tue","wed","thu","fri","sat","sun");

    $weekNum = date("W", strtotime("$year$valEnc$week"));

    $mName = $month[($monthNum)-1];
    $yearNum= $date->format('Y');


    $calendar= compact("fulldate", "dayMonth", "days", "weekNum", "mName", "yearNum");   // $calendar['array'][value] / $calendar[value]
    return $calendar;


}

?>

JS：

$( document ).ready(function() {


var $input = $('#calMod');


        var calCheckWeek = function() {

            var theDate = new Date();
                if(theDate.getDay() >= 5){        //if its friday, switch to next week
                    if ($calMod == 0);{
                       $input.val(1);
                    };
                };
        };

calCheckWeek();

var $calMod = $input.val();




$('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {

    if ($calMod <= 0) {
        $('.calendar-prev-week').hide();
    }

    else {
        $('.calendar-prev-week').show();
    }

    console.log("Calendar loaded successfully!");


    });


    $('.calendar-prev-week').click(function () {


        var $input = $('#calMod');
        var value = parseInt($input.val());

        value = value - 1;


        $input.val(value);
        var $calMod = $input.val();

        if ($calMod <= 0) {
            $('.calendar-prev-week').hide();
        }

        else {
            $('.calendar-prev-week').show();
        }


        $('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {


            console.log("Decreased Week Number");
        });
    });



 $('.calendar-next-week').click(function () {

        var $input = $('#calMod');

        var value = parseInt($input.val());

        value = value + 1;

        $input.val(value);
        var $calMod = $input.val();

        if ($calMod <= 0) {
            $('.calendar-prev-week').hide();
        }

        else {
            $('.calendar-prev-week').show();
        }


        $('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {

            console.log("Increased Week Number");

        });
    });

我创建了2个按钮增加＆amp;减少一周，做了一个隐藏的输入'#calMod'，因为整个页面没有刷新（我只在特定的div'.load-div'加载日历）每次按下按钮时都不会重置该值增加或减少一周，因为我只希望它显示工作日我添加了一个检查，以查看其星期五是否更多（如果（theDate.getDay（）＆gt; = 5），如果是，它将在下一周首次加载时更改为，你仍然可以回去一周（到当前一周），但不能再回来了。

现在我的“周”日历按预期工作。

下一步是选择日期并将它们存储在JSon中。感谢您的帮助和想法！

1 个答案:

答案 0 :(得分：1)

使用HTML button元素调用PHP函数而不重新加载页面：

calendar.html 

<div id="buttons_week">
  <button>+1 Week</button>
  <button>-1 Week</button>
</div>
<div id="calendar"></div>

<script>

// get display target
var calendar = document.getElementById('calendar');

// get buttons and loop
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {

    // add function to click event
    elem.addEventListener('click', function (evt) {
        // set up XHR object
        if ( window.XMLHttpRequest ) {
            xmlhttp=new XMLHttpRequest() // IE7+, Firefox, Chrome, Opera, Safari
        }
        else { // IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {

// here's where you handle the response you get from the PHP script

                // for debugging
                //calendar.innerHTML = xmlhttp.responseText
                //console.log(JSON.parse(xmlhttp.responseText))

                // parse JSON string from server and update calendar
                var calendar_obj = JSON.parse(xmlhttp.responseText)
                calendar.innerHTML = calendar_obj.weekNum + '/' + calendar_obj.mName + '/' + calendar_obj.yearNum

            }
        }
        xmlhttp.open("GET","calendar.php?mod="+encodeURIComponent(evt.target.innerHTML),true);
        xmlhttp.send();
    })
})

</script>

calendar.php 

<?php

echo json_encode(calendar($_GET['mod']));

function calendar($modification){
  // function body here, removed for brevity
}

?>

如果您不需要去服务器寻找别的东西，那么这里是一个全JavaScript版本。无需致电服务器！

JSFiddle 

<div id="buttons_week">
  <button>+1 Week</button>
  <button>-1 Week</button>
</div>
<div id="calendar"></div>

<script>

var calendar = document.getElementById('calendar');
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {
    elem.addEventListener('click', function (evt) {
        var calendar_obj = week_increment(evt.target.innerHTML)
        console.log(calendar_obj.days)
        console.log(calendar_obj.dayMonth)
        calendar.innerHTML = 
            calendar_obj.weekNum + '/' +
            calendar_obj.mName + '/' +
            calendar_obj.yearNum
    })
})

function week_increment(mod) {
    var dd = new Date()
    var week_inc = 7 * 24 * 60 * 60 * 1000
    if ( 0 === mod.indexOf('-') ) { week_inc *= -1 } // decrement week
    dd = new Date(dd.getTime() + week_inc)
    dd.setHours(0,0,0);

    var dayMonth = [], days = [], weekNum
    dd.setHours(-24 * ((dd.getDay() || 7) - 1))
    for ( ii = 0; ii < 7; dd.setHours(24), ii++ ) {
        days.push(dd.getDate())
        dayMonth.push(dd.getMonth()+1)
        if ( 3 === ii ) { // get weekNum on Thursday ??
            weekNum = Math.ceil((((dd-new Date(dd.getFullYear(),0,1))/8.64e7)+1)/7) // http://stackoverflow.com/a/18005464/2743458
        }
    }

    return { 
        'dayMonth': dayMonth,
        'days':     days,
        'weekNum':  weekNum, 
        'mName':    months[dd.getMonth()], 
        'yearNum':  dd.getFullYear()
    }
}

var months = ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'];

</script>
相关问题
最新问题