如何从xhr请求中检索数据?

时间:2019-11-26 15:24:41

标签: javascript php xmlhttprequest

这是我的情况:

我有一个创建XMLHttpRequest对象的JS函数。请求被打开,并且我在指定的URL上调用“ GET”方法。该请求有效,因为它到达url目标并在目标中执行代码,但是我不确定如何访问目标代码中的变量。

这就是我所拥有的:

JS:

function fillTestsTable()
{
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            alert(xhr.responseText);
        }
    }   

    xhr.open("GET", "./db-queries/get-tests.php");
    xhr.send(null);
}

PHP目标文件:

<?php

    $conn = mysqli_connect("localhost:3306"   ,   "exampre2_tplugin"   ,   ",Vyml.F!@(}{"   ,   "exampre2_totaltoefltimeplugin");

    if (!$conn) {
        echo "Error: Unable to connect to MySQL." . PHP_EOL;
        echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
        echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
        exit;
    }

    $sql = "SELECT * FROM TOEFLTESTS";
    $result = mysqli_query($conn, $sql);

    //return $result;
    ?>

我想做的是在php的$ result变量中返回数据。有办法吗?

2 个答案:

答案 0 :(得分:0)

在PHP中,return用于将值从当前函数返回到调用该函数的位置。

要在HTTP响应中输出数据,请使用echoprint

请注意,mysqli_query返回一个mysqli_result对象,因此您需要提取所需的数据(例如,使用json_encode),然后将其转换为合适的文本格式(例如,使用{{3 }}。

答案 1 :(得分:0)

例如:如果您想返回JSON格式的数据供Ajax回调函数使用,则可以执行以下操作:

<?php

    $conn = mysqli_connect("localhost:3306"   ,   "exampre2_tplugin"   ,   ",Vyml.F!@(}{"   ,   "exampre2_totaltoefltimeplugin");

    $data=[];   //store recordset here

    $sql = "SELECT * FROM TOEFLTESTS";
    $result = mysqli_query($conn, $sql);

    if( $result ){ /* iterate through the recordset, add each row to output data */
        while( $rs=$result->fetch_object() ){
            $data[]=$rs;
        }
    }
    /* send data back to the ajax callback function */
    exit( json_encode( $data ) );
?>

您可以通过多种方式进行此操作,但这有助于明确定义目的并确定应用程序的工作方式。 callback然后将处理响应数据,以将新行添加到HTML表中。了解回调函数通常会(或会)影响您返回的数据格式-在您的情况下,如果只是在HTML表中添加新行,则最好将服务器端的格式设置为HTML和发回原始html文本。


使用Ajax可使您的应用程序请求各种数据,而无需重新加载页面(通常是传统的表单提交)

作为在基本ajax请求(POST而不是GET,但工作原理相同)之后填充HTML表的基本示例

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        $dbhost =   'localhost';
        $dbuser =   'root'; 
        $dbpwd  =   'xxx'; 
        $dbname =   'maps';
        $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

        ob_clean();

        $sql='select `name`,`address`,`lat`,`lng` from `maps` limit 10';
        $res=$db->query( $sql );

        while( $rs=$res->fetch_object() ){
            printf('
                <tr>
                    <td>%s</td>
                    <td>%s</td>
                    <td>%s</td>
                    <td>%s</td>
                </tr>',
                $rs->name,
                $rs->address,
                $rs->lat,
                $rs->lng
            );
        }
        exit();
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Ajax: fetch data from db - add to table</title>
        <script>
            const ajax=function(url,params,callback){
                let xhr=new XMLHttpRequest();
                xhr.onload=function(){
                    if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
                };
                xhr.open( 'POST', url, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send( params );
            };
        </script>
    </head>
    <body>
        <input type='button' value='Fetch Data' />
        <table></table>
    </body>
    <script>
        document.querySelector('input[type="button"]').onclick=function(e){
            ajax( location.href, false, function(r){
                this.innerHTML=r
            }.bind( e.target.nextElementSibling ))
        }
    </script>
</html>