php-laravel-JavaScript在通过路由堆栈溢出传递参数后不起作用

顺晟科技

2022-10-19 12:34:56

我试图创建一个网站，展示从各种电子市场的所有搜索结果。我使用javascript来显示结果，在我尝试通过Route传递参数之前，它工作得很好。但一旦我这么做了，结果就不再显示了。我想这与JavaScript有关。下面是代码:

<?php
    use Sunra\PhpSimple\HtmlDomParser;


    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.tokopedia.com/search?st=product&q=hp%2024mh');
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 300);
    curl_setopt($ch, CURLOPT_TIMEOUT, 300);
    $response = curl_exec($ch);
    curl_close($ch);
    
    file_put_contents("text.html", $response);

    echo $keyword;

    // $url = 'https://www.tokopedia.com/search?st=product&q=24g2';
    // $content = file_get_contents($url);
    // $first_step = explode('<div class="css-1d1aa4" data-testid="imgSRPProdMain">' , $content );
    // $second_step = explode("</div>" , $first_step[1] );

    // echo $second_step[0];
?>

@extends('layout.app')

@section('title')
<title>안녕</title>
@endsection

<!-- Custom CSS -->
<link href="/css/card.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

@section('body')

<div class="container-fluid bg-trasparent my-4 p-3" style="position: relative;">
    <div class="row py-5">
        <div class="col-sm d-flex justify-content-center">
            <h3>Search Result</h3>
        </div>
    </div>
    <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3" id="carda">
    </div>
</div>

@endsection

<script>
    $(document).ready(function(){
        var img;

        $( "#carda" ).load( "text.html .css-1d1aa4 > img", function() {
            var ancestor = document.getElementById('carda');
            var child = ancestor.getElementsByTagName('*');

            var i;
            for (i = 0; i < 3; i++) {
                child[0].remove();
            }

            $( " #carda > img " ).removeClass("success fade").addClass("productImage");
            $( " .productImage ").wrap("<div class='col'><div class='card h-100 shadow-sm'></div></div>");
            $( " .card ").append("<div class='card-body'><div class='clearfix mb-3'> <span class='float-start badge rounded-pill bg-success'>Rp. 1,000,000.00</span></div><h5 class='card-title'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5><div class='text-center my-4'> <a href='#' class='btn btn-warning'>View Product</a> </div></div>");
        });

    });

</script>

下面是web.php的代码:

<?php
    use Sunra\PhpSimple\HtmlDomParser;


    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.tokopedia.com/search?st=product&q=hp%2024mh');
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 300);
    curl_setopt($ch, CURLOPT_TIMEOUT, 300);
    $response = curl_exec($ch);
    curl_close($ch);
    
    file_put_contents("text.html", $response);

    echo $keyword;

    // $url = 'https://www.tokopedia.com/search?st=product&q=24g2';
    // $content = file_get_contents($url);
    // $first_step = explode('<div class="css-1d1aa4" data-testid="imgSRPProdMain">' , $content );
    // $second_step = explode("</div>" , $first_step[1] );

    // echo $second_step[0];
?>

@extends('layout.app')

@section('title')
<title>안녕</title>
@endsection

<!-- Custom CSS -->
<link href="/css/card.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

@section('body')

<div class="container-fluid bg-trasparent my-4 p-3" style="position: relative;">
    <div class="row py-5">
        <div class="col-sm d-flex justify-content-center">
            <h3>Search Result</h3>
        </div>
    </div>
    <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3" id="carda">
    </div>
</div>

@endsection

<script>
    $(document).ready(function(){
        var img;

        $( "#carda" ).load( "text.html .css-1d1aa4 > img", function() {
            var ancestor = document.getElementById('carda');
            var child = ancestor.getElementsByTagName('*');

            var i;
            for (i = 0; i < 3; i++) {
                child[0].remove();
            }

            $( " #carda > img " ).removeClass("success fade").addClass("productImage");
            $( " .productImage ").wrap("<div class='col'><div class='card h-100 shadow-sm'></div></div>");
            $( " .card ").append("<div class='card-body'><div class='clearfix mb-3'> <span class='float-start badge rounded-pill bg-success'>Rp. 1,000,000.00</span></div><h5 class='card-title'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5><div class='text-center my-4'> <a href='#' class='btn btn-warning'>View Product</a> </div></div>");
        });

    });

</script>

和SearchController代码:

<?php
    use Sunra\PhpSimple\HtmlDomParser;


    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.tokopedia.com/search?st=product&q=hp%2024mh');
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 300);
    curl_setopt($ch, CURLOPT_TIMEOUT, 300);
    $response = curl_exec($ch);
    curl_close($ch);
    
    file_put_contents("text.html", $response);

    echo $keyword;

    // $url = 'https://www.tokopedia.com/search?st=product&q=24g2';
    // $content = file_get_contents($url);
    // $first_step = explode('<div class="css-1d1aa4" data-testid="imgSRPProdMain">' , $content );
    // $second_step = explode("</div>" , $first_step[1] );

    // echo $second_step[0];
?>

@extends('layout.app')

@section('title')
<title>안녕</title>
@endsection

<!-- Custom CSS -->
<link href="/css/card.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

@section('body')

<div class="container-fluid bg-trasparent my-4 p-3" style="position: relative;">
    <div class="row py-5">
        <div class="col-sm d-flex justify-content-center">
            <h3>Search Result</h3>
        </div>
    </div>
    <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3" id="carda">
    </div>
</div>

@endsection

<script>
    $(document).ready(function(){
        var img;

        $( "#carda" ).load( "text.html .css-1d1aa4 > img", function() {
            var ancestor = document.getElementById('carda');
            var child = ancestor.getElementsByTagName('*');

            var i;
            for (i = 0; i < 3; i++) {
                child[0].remove();
            }

            $( " #carda > img " ).removeClass("success fade").addClass("productImage");
            $( " .productImage ").wrap("<div class='col'><div class='card h-100 shadow-sm'></div></div>");
            $( " .card ").append("<div class='card-body'><div class='clearfix mb-3'> <span class='float-start badge rounded-pill bg-success'>Rp. 1,000,000.00</span></div><h5 class='card-title'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5><div class='text-center my-4'> <a href='#' class='btn btn-warning'>View Product</a> </div></div>");
        });

    });

</script>

有人能告诉我这有什么问题吗？任何帮助都将不胜感激！感谢:D

顺晟科技：

如果数组不关联，则不需要在数组中传递单个参数。

改为执行以下操作:

我不知道如何也不知道为什么，但是当我通过路由传递参数时，指向“text.html”的路径不起作用。我做了一些测试，发现它需要的路径是“yourweb.com/{path here}”，而不是目录。我通过在web.php.

中为text.html添加一个新的路由来解决这个问题。

上一篇：Java-在使用servlets执行下一篇：JavaScript-隐藏/显示表单