Fatal编程技术网
  • javascript/
  • Javascript AJAX和处理PHP页面-不一起玩

Javascript AJAX和处理PHP页面-不一起玩

javascript php jquery ajax

Javascript AJAX和处理PHP页面-不一起玩,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,这是我之前的一篇文章的后续文章，我的主要问题集中在FullCalendar上。现在，我已经把怀疑的范围缩小到主页和获取数据的PHP页面之间的问题 当我单独运行“events.php”页面时，它返回的数据很好，因此页面内部没有问题。JSON的所有问题都已经解决了，所以返回的数据没有问题（我只是将其粘贴到“事件”行中。另外，在Chrome中，我单击错误，然后单击错误面板（F12）中的“响应”选项卡，它会说“请求没有可用的响应数据”。只需手动将查询字符串复制到URL并粘贴到Chrome地址栏中，PHP

这是我之前的一篇文章的后续文章，我的主要问题集中在FullCalendar上。现在，我已经把怀疑的范围缩小到主页和获取数据的PHP页面之间的问题

当我单独运行“events.php”页面时，它返回的数据很好，因此页面内部没有问题。JSON的所有问题都已经解决了，所以返回的数据没有问题（我只是将其粘贴到“事件”行中。另外，在Chrome中，我单击错误，然后单击错误面板（F12）中的“响应”选项卡，它会说“请求没有可用的响应数据”。只需手动将查询字符串复制到URL并粘贴到Chrome地址栏中，PHP文件即可返回数据

所以，这里有三个部分：我的主页、PHP和Chrome的屏幕截图。关于如何解决这个问题，有什么见解吗？请……：）

--这是决议。与我从（）获得的代码不同，我不应该使用“localhost:8888/fullcalendar/events.php”。我甚至试过“”，但都没用。所以我刚刚使用了“events.php”，并且它可以工作！！谢谢你们的帮助我对跨域安全不太熟悉，但原始路径输入正确（我检查了十几次）


$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
var日历=
$（“#日历”）.fullCalendar({
是的，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
事件来源：[
{
网址：'http://localhost:8888/tpsdb/fulcalendar/events.php',
键入：“GET”，
数据：{}，
错误：函数（）{
警报（'获取事件时出错！'）；
}
}
],
//将全天从字符串转换为布尔值
eventRender:函数（事件、元素、视图）{
如果（event.allDay=='true'）{
event.allDay=true；
}否则{
event.allDay=false；
}
},
是的，
selectHelper:对，
选择：功能（开始、结束、全天）{
var title=prompt（'事件标题：'）；
var url=prompt（'Type Event url，如果退出：'）；
如果（标题）{
var start=$.fullCalendar.formatDate（开始，“yyyy-MM-dd HH:MM:ss”）；
var end=$.fullCalendar.formatDate（end，“yyyy-MM-dd HH:MM:ss”）；
$.ajax({
网址：'http://localhost:8888/fullcalendar/add_events.php',
数据：'title='+title+'&start='+start+'&end='+end+'&url='+url，
类型：“POST”，
成功：函数（json）{
警报（“添加成功”）；
}
});
日历。完整日历（'renderEvent'，
{
标题:标题,，
开始：开始，
完:完,，
全天
},
true//使事件“持续”
);
}
日历。完整日历（“取消选择”）；
},
是的，
eventDrop：函数（事件，增量）{
var start=$.fullCalendar.formatDate（event.start，“yyyy-MM-dd HH:MM:ss”）；
var end=$.fullCalendar.formatDate（event.end，“yyyy-MM-dd HH:MM:ss”）；
$.ajax({
网址：'http://localhost:8888/fullcalendar/update_events.php',
数据：'title='+event.title+'&start='+start+'&end='+end+'&id='+event.id，
类型：“POST”，
成功：函数（json）{
警报（“更新成功”）；
}
});
},
eventResize:函数（事件）{
var start=$.fullCalendar.formatDate（event.start，“yyyy-MM-dd HH:MM:ss”）；
var end=$.fullCalendar.formatDate（event.end，“yyyy-MM-dd HH:MM:ss”）；
$.ajax({
网址：'http://localhost:8888/fullcalendar/update_events.php',
数据：'title='+event.title+'&start='+start+'&end='+end+'&id='+event.id，
类型：“POST”，
成功：函数（json）{
警报（“更新成功”）；
}
});
}
});
});
身体{
边缘顶端：40px；
文本对齐：居中；
字体大小：14px；
字体系列：“Lucida Grande”，Helvetica，Arial，Verdana，无衬线；
}
#历法{
宽度：900px；
保证金：0自动；
}
现在，PHP页面名为“events.PHP”

尝试仅使用/fullcalendar/update\u events.php，而不是添加主机：端口。看起来您正在为页面和ajax使用不同的主机。这将确保在服务器上发布时代码正常工作

另外，正如Bergi所说，fullcalendar/update_events.p

<!DOCTYPE html>
<html>
<head>
    <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src='fullcalendar/fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            var calendar =
                $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                eventSources: [
                    {
                        url: 'http://localhost:8888/tpsdb/fulcalendar/events.php',
                        type: 'GET',
                        data: {},
                        error: function () {
                            alert('There was an error while fetching events!');
                        }
                    }
                ],

                // Convert the allDay from string to boolean
                eventRender: function(event, element, view) {
                    if (event.allDay === 'true') {
                        event.allDay = true;
                    } else {
                        event.allDay = false;
                    }
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    var url = prompt('Type Event url, if exits:');
                    if (title) {
                        var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
                        var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
                        $.ajax({
                            url: 'http://localhost:8888/fullcalendar/add_events.php',
                            data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
                            type: "POST",
                            success: function(json) {
                                alert('Added Successfully');
                            }
                        });
                        calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true // make the event "stick"
                        );
                    }
                    calendar.fullCalendar('unselect');
                },

                editable: true,
                eventDrop: function(event, delta) {
                    var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost:8888/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });
                },
                eventResize: function(event) {
                    var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        url: 'http://localhost:8888/fullcalendar/update_events.php',
                        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                        type: "POST",
                        success: function(json) {
                            alert("Updated Successfully");
                        }
                    });

                }

            });

        });

    </script>
    <style>
        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

        }
        #calendar {
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>



<?php
    // List of events
    $json = array();

    // Query that retrieves events
    $requete = "SELECT * FROM evenement ORDER BY id";

    // connection to the database
    include ('../includes/functions.php');

    // Execute the query
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

    // sending the encoded result to success page
    $tempjson =  json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
    $tempjson = str_replace('"false"', 'false', $tempjson);
    echo $tempjson;

?>



//PHP
header('Content-Type: application/json');

//Javascript
eventSources: [
                {
                    url: 'http://localhost:8888/tpsdb/fulcalendar/events.php',
                    type: 'GET',
                    data: {},
                    dataType: 'json',   //<-- add this line
                    error: function () {
                        alert('There was an error while fetching events!');
                    }
                }
            ],