如何使用带有数据的ajax重定向php页面？

Question

I know there are lots of questions here with the same title as mine but I can't solve my problem using the answers provided for them.我知道这里有很多问题与我的标题相同，但我无法使用为他们提供的答案解决我的问题。
The program is supposed to redirect the page to the OCR result after taking a screenshot of the google map.该程序应该在截取谷歌地图的屏幕截图后将页面重定向到 OCR 结果。 What happen is that I can only see the result through network > proceessing.php > preview.发生的情况是我只能通过 network > processessing.php > preview 看到结果。
I also tried to use window.location.href = "your-url-to-redirect-to";我也尝试使用window.location.href = "your-url-to-redirect-to"; on the ajax but it would only cause the page a lot of errors for missing data.在 ajax 上，但它只会导致页面丢失数据的很多错误。
Below is the index.php下面是 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>

This is the processing.php这是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

In order not to change everything, you can simply return from processing.php only:为了不改变一切，你可以简单地从 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>

and then in the index.php in the然后在index.php中

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

These must be included in index.php这些必须包含在 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