使用AJAX发布到PHP——将值返回到原始脚本


Using AJAX to Post to PHP -- Getting Values Back to Original Script

很抱歉标题是gore——我甚至不确定我到底在问什么。

我有一个Jquery脚本,它检查边框颜色。如果颜色匹配,那么它会将其保存到一个数组中,并将其发送到PHP脚本中。

            var fields={};
            fields[0]=$('.block0').css("border-color");
            var divs={};
            divs[0]=$('.block0 h2').html();
            //The above are just examples sense the code is a little lengthy
            var c=0;
            var i=0;
            var elements={};
            while (c !== 24)
            {
                if (fields[c] == "rgb(129, 222, 252)")
                {
                    elements[i]=divs[c];
                    alert (elements[i]);
                    i++;
                }
                c++;
            }
            $.ajax({
                url: "process.php",
                data: elements,
                type: "POST",
            });

这些都位于一个"hello.php"文件中。

完成后,正如你所看到的,它会将变量传递到一个名为"process.PHP"的PHP脚本中。在这个脚本中,会发生一些事情,比如从MYSQL数据库、配置文件等中获取更多信息。然后我的目标是将这些额外信息传递回"hello.PHP"文件。

我之所以这样做,是因为我(尽我所能)避免任何重定向或刷新。我不完全确定我做这件事的方式是否正确。无论如何,当我试图将额外的信息从"process.php"传递到"hello.php"时,我遇到了一个小障碍。非常感谢任何建议!

编辑:以下是更多信息,根据请求:

hello.php

var openIt=function()
        {
            var fields={};
                fields[0]=$('.block0').css("border-color");
                fields[1]=$('.block1').css("border-color");
                fields[2]=$('.block2').css("border-color");
                fields[3]=$('.block3').css("border-color");
                fields[4]=$('.block4').css("border-color");
                fields[5]=$('.block5').css("border-color");
                fields[6]=$('.block6').css("border-color");
                fields[7]=$('.block7').css("border-color");
                fields[8]=$('.mmod2').css("border-color");
                fields[9]=$('.mmod3').css("border-color");
                fields[10]=$('.mmod4').css("border-color");
                fields[11]=$('.mmod5').css("border-color");
                fields[12]=$('.mmod6').css("border-color");
                fields[13]=$('.mmod7').css("border-color");
                fields[14]=$('.mmod8').css("border-color");
                fields[15]=$('.mmod9').css("border-color");
                fields[16]=$('.ttemp2').css("border-color");
                fields[17]=$('.ttemp3').css("border-color");
                fields[18]=$('.ttemp4').css("border-color");
                fields[19]=$('.ttemp5').css("border-color");
                fields[20]=$('.ttemp6').css("border-color");
                fields[21]=$('.ttemp7').css("border-color");
                fields[22]=$('.ttemp8').css("border-color");
                fields[23]=$('.ttemp9').css("border-color");
            var divs={};
                divs[0]=$('.block0 h2').html();
                divs[1]=$('.block1 h2').html();
                divs[2]=$('.block2 h2').html();
                divs[3]=$('.block3 h2').html();
                divs[4]=$('.block4 h2').html();
                divs[5]=$('.block5 h2').html();
                divs[6]=$('.block6 h2').html();
                divs[7]=$('.block7 h2').html();
                divs[8]=$('.mmod2 h2').html();
                divs[9]=$('.mmod3 h2').html();
                divs[10]=$('.mmod4 h2').html();
                divs[11]=$('.mmod5 h2').html();
                divs[12]=$('.mmod6 h2').html();
                divs[13]=$('.mmod7 h2').html();
                divs[14]=$('.mmod8 h2').html();
                divs[15]=$('.mmod9 h2').html();
                divs[16]=$('.ttemp2 h2').html();
                divs[17]=$('.ttemp3 h2').html();
                divs[18]=$('.ttemp4 h2').html();
                divs[19]=$('.ttemp5 h2').html();
                divs[20]=$('.ttemp6 h2').html();
                divs[21]=$('.ttemp7 h2').html();
                divs[22]=$('.ttemp8 h2').html();
                divs[23]=$('.ttemp9 h2').html();

            var c=0;
            var i=0;
            var elements={};
            while (c !== 24)
            {
                if (fields[c] == "rgb(129, 222, 252)")
                {
                    elements[i]=divs[c];
                    alert (elements[i]);
                    i++;
                }
                c++;
            }
            $.ajax({
                url: "process.php",
                data: elements,
                type: "POST",
            });
        }

我知道这很难看。。。。

下面是hello.php的另一个片段,它实际上抛出了头和其他东西:

<?php
                    $sql = "SELECT * FROM case_info";
                    $result = mysqli_query($conn, $sql);
                    if (mysqli_num_rows($result) > 0) 
                    {
                        $row = array();
                        while($row[] = mysqli_fetch_array($result));
                        $max=count ($row);
                        $c=0;
                        while (($max-1) <> $c)
                        {
                            echo    '<script>
                                    var block'.$c.'=function(){
                                        $(".block'.$c.'").css("border",".15vw solid #81DEFC");
                                    }
                                    </script>';
                            echo    '<div onClick="block'.$c.'()" class="block'.$c.'">
                                        <div class="headerbl"><h2>'.$row[$c]["id"].'</h2></div>
                                        <p>'.$row[$c]["client"].'</p>
                                    </div>';
                            $c++;
                        }
                    }
                ?>

最后,将有一个新的<div>,当用户打开其中一个"块"时,它将包含信息。基本上,用户会:

  1. 单击"<div class="block0">
  2. 单击"打开"
  3. 一个新的覆盖类型div将包含关于他们单击的特定"块"的更多信息。把它想象成一个"阅读更多"类型的场景

使用ajax回调函数

$.ajax({
        url: 'process.php',
        type: 'POST',
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            var obj = $.parseJSON(data);
            alert(obj.result);                  
        }
});

使用json格式的数据来传递php脚本中的变量,在php脚本中应该是这样的:

$jsonArray = array();
$jsonArray['result'] = 'result';
$jsonArray['data'] = 'data';
echo json_encode($jsonArray);

然后使用parseJSON()解析javascript中的json数据,要使用变量,请使用obj.result或obj.data.

JQueryAJAX有一个函数可以满足您的需求。

success()函数:

如果请求成功,将调用的函数。该函数传递三个参数:从服务器返回的数据,根据dataType参数或dataFilter回调函数(如果指定)进行格式化;描述所述状态的字符串;以及jqXHR(在jQuery 1.4.x中,XMLHttpRequest)对象。

你可以这样做你的ajax:

$.ajax({
            url: "process.php",
            data: elements,
            type: "POST",
            success: function(data) {
               // data is a variable coming from process.php as return value
            }
        });

祝你好运,伙计!