如何使用帶有數據的ajax重定向php頁面？

Question

我知道這里有很多問題與我的標題相同，但我無法使用為他們提供的答案解決我的問題。
該程序應該在截取谷歌地圖的屏幕截圖后將頁面重定向到 OCR 結果。 發生的情況是我只能通過 network > processessing.php > preview 看到結果。
我也嘗試使用window.location.href = "your-url-to-redirect-to"; 在 ajax 上，但它只會導致頁面丟失數據的很多錯誤。
下面是 index.php

<body>
<input type='button' class="btn btn-success" id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<script type="text/javascript">
    function screenshot() {
        var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform");
        var comp = transform.split(",")
        var mapleft = parseFloat(comp[4])
        var maptop = parseFloat(comp[5])
        $(".gm-style>div:first>div:first>div:last>div").css({ 
            "transform":"none",
            "left":mapleft,
            "top":maptop,
        });
        html2canvas(document.getElementById('map'), {
            useCORS: true
        }).
        then(function(canvas) {
                var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
                $.ajax({
                    url: 'processing.php',
                    type: 'post',
                    data: {image: base64URL},
                    success: function(data){
                        console.log('Upload successfully');
                    }
                });
            }
        );
    }
</script>
</body>

這是processing.php

<?php
// upload screenshot
$image = $_POST['image'];
$location = "uploads/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;

file_put_contents($file, $image_base64);
// end

uploadToApi($file);

function uploadToApi($target_file){
    require __DIR__ . '/vendor/autoload.php';
    $fileData = fopen($target_file, 'r');
    $client = new \GuzzleHttp\Client();
    try {
    $r = $client->request('POST', 'https://api.ocr.space/parse/image',[
        'headers' => ['apiKey' => '[API_KEY]'],
        'multipart' => [
            [
                'name' => 'file',
                'contents' => $fileData
            ]
        ]
    ], ['file' => $fileData]);
    $response =  json_decode($r->getBody(),true);
    if(empty($response['ErrorMessage'])) {
?>
<html>
    <head>
    <title>Result</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js'></script>
    </head>
    <body>
        <div class="form-group container">
            <label for="exampleTextarea">Result</label>
            <textarea class="form-control" id="exampleTextarea" rows="30">
            <?php
                foreach($response['ParsedResults'] as $pareValue) {
                    echo $pareValue['ParsedText'];
                }
            ?></textarea>
        </div>
    </body>
</html>
<?php
    } else {
        header('HTTP/1.0 400 Forbidden');
        echo $response['ErrorMessage'];
    }
    } catch(Exception $err) {
        header('HTTP/1.0 403 Forbidden');
        echo $err->getMessage();
    }
}
?>

Answer 1

為了不改變一切，你可以簡單地從 processing.php 返回：

<div class="form-group container">
        <label for="exampleTextarea">Result</label>
        <textarea class="form-control" id="exampleTextarea" rows="30">
        <?php
            foreach($response['ParsedResults'] as $pareValue) {
                echo $pareValue['ParsedText'];
            }
        ?></textarea>
    </div>

然后在index.php中

success: function (data) {
        document.getElementById("Any div").innerHTML + = data
    // or to body
    document.body.innerHTML = document.body.innerHTML + data;
    }

這些必須包含在 index.php 中

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js'></script>

如何使用帶有數據的ajax重定向php頁面？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-02-07 14:20:45

如何使用帶有數據的ajax重定向php頁面？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-02-07 14:20:45

解決方案1
0 已采納 2020-02-07 14:20:45