Javascript 使用JQuery滑块运行服务器端PHP_Javascript_Php_Jquery_Html_Ajax

Javascript 使用JQuery滑块运行服务器端PHP

javascript php jquery html ajax

Javascript 使用JQuery滑块运行服务器端PHP,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,在完成codecademy课程后，我一直在寻找一个新的项目来进一步学习PHP。。。然而，我遇到了一条死胡同，我认为这与AJAX部分有关，但我无法找出它出了什么/哪里出了问题，以及如何出问题代码： <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"><

在完成codecademy课程后，我一直在寻找一个新的项目来进一步学习PHP。。。然而，我遇到了一条死胡同，我认为这与AJAX部分有关，但我无法找出它出了什么/哪里出了问题，以及如何出问题

代码：

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
    </head>
    <body>
        <div id="slider"></div>
        <!-- I use the roundsliderui documentation for this: http://roundsliderui.com/ -->
        <script type="text/javascript">
            $("#slider").roundSlider({
                radius: 80,
                min: 0,
                max: 360,
                width: 9,
                startAngle: -90,
                handleSize: "+8",
                sliderType: "min-range",
                value: 180
          });

            $("#slider").on("drag", function (e) {
                var heading = e.value;
                $.post( "quicktest.php", {send: heading});
                console.log(heading);})
        </script>

        <?php
            function show(){
                $course= $_POST["send"];
                echo "Heading is: ".$course;
            } if (isset($_POST["send"])){
                show();}
        ?>
    </body>
</html>


$（“#滑块”）.roundSlider({
半径：80，
分:0,，
最高：360，
宽度：9，
startAngle:-90，
把手大小：“+8”，
滑块类型：“最小范围”，
数值：180
});
$（“#滑块”）。在（“拖动”上，函数（e）{
var标题=e.value；
$.post（“quicktest.php”，{send:heading}）；
console.log（标题）；}）

我试图做的是在一个名为quicktest.php的php页面上显示一个圆形滑块。在拖动滑块时，应使用名为

show（）

的php函数更新页面。为此，我使用echo语句

发生的情况如下：

Post works：在chrome的开发者控制台中，我看到正确的值被发送到localhost，并看到状态为200
当我在开发者控制台>网络>预览中查看时：我看到页面得到了正确的更新
但是，“我的浏览器”中的页面保持不变

所有这些让我觉得我在AJAX上做错了什么；但正如我所说，我无法指出错误。

这是因为您不能以这种方式使用PHP。PHP在进入浏览器之前在服务器上进行评估

这样做的方法是使用javascript。一种方法是使用jQuery的：

$（“#滑块”）。打开（“拖动”，函数（e）{
var标题=e.value；
$（“#滑块”）。之后（“标题课程为：“+Heading+””）
$.post（“quicktest.php”，{send:heading}）；
控制台日志（标题）；
})

或者，如果您不希望在ajax请求完成之前显示消息，则可以执行以下操作：

$("#slider").on("drag", function (e) {
    var heading = e.value;

    $.post("quicktest.php", {send: heading}, function () {
        $('slider').after("<p>Heading course is: " + heading + "</p>")
    });
})

$（“#滑块”）。打开（“拖动”，函数（e）{
var标题=e.value；
$.post（“quicktest.php”，{send:heading}，函数（）{
$（'slider'）。后面（“标题课程为：“+Heading+””）
});
})

希望这有帮助

console.log（标题）这将在$.post完成之前执行，因为ajax是异步的。将其移动到$.post请求的回调函数中。尝试使用一个简单的echo$\u post['send']输出$\u post变量；死亡在PHPAlso之上，使用“.done”这样的处理程序，我计划将heading变量与PHP的shell_exec（）部分相结合。我还在弄清楚这一部分，所以我还没有这方面的代码。但是这两种方法中有哪一种更适合与shell_exec（）一起使用呢？谢谢。@clunless\u船长这是您将在quickstart.php中执行的操作。
$("#slider").on("drag", function (e) {
    var heading = e.value;

    $.post("quicktest.php", {send: heading}, function () {
        $('slider').after("<p>Heading course is: " + heading + "</p>")
    });
})