将 PHP 回显结果传递给 javascript 函数并在视图中显示？答案

【问题标题】：pass PHP echo result to javascript function and display in view?将 PHP 回显结果传递给 javascript 函数并在视图中显示？
【发布时间】：2016-08-04 23:40:21
【问题描述】：

我正在尝试将 PHP API 调用的 JSON 结果传递给将在视图中显示结果的函数。

script.js函数

function ajaxProductsSearch() {

    products.empty();
    preloader.css('visibility', 'visible')

    // Issue a request to the proxy
    $.post('test.php', {
            'search': searchBox.val()
        }

        function($results) { // pass $results from test.php?
            if ($results.results_count == 0) {

                preloader.css('visibility', 'hidden');
                message.html("We couldn't find anything!").show();
                return false;
            }

            $.each() { // code to display in view?

                // var html = ''; 
                // products.append(html);
            };

            preloader.css('visibility', 'hidden');
        }, 'json');
}

基本上，您在视图的文本框中输入搜索词，script.js 会将字符串发布到test.php 脚本，然后该脚本将运行 API 查询请求并通过echo $results 显示结果。

【问题讨论】：

有什么问题...？
你错过了函数（$results）和 $.post 的其余部分之间的逗号。
它在做什么而不是进行 AJAX 调用？ Javascript 控制台中是否有任何错误？

标签： javascript php json post

【解决方案1】：

这将显示您最初的结果，以便您继续开发。

function($results) { // pass $results from test.php?
    if ($results.results_count == 0) {
        ...
    }

    // toString won't provide a nice output, but it will
    // show your results object. Handling the results is 
    // dependent on the structure of your object.
    message.html($results.toString());
}

我建议将 message 替换为指向搜索结果的容器元素的 jQuery 对象。

例如<div id="search-results"></div> 和 $("#search-results").html($results)。

从您的 PHP 中返回一个 JSON 对象并使用您的 javascript 解析它在风格上会更好，但我假设您当前只是返回一个带有结果的字符串。

我建议你查一下这些函数：

PHP json_encode()
jQuery $.parseJSON()

【讨论】：

$results.results_count 暗示 $results 是一个对象。但是message.html($results) 要求它是 HTML 字符串。不能两者兼有。
肯定是字符串，$.post返回字符串。在 js 中你可以扩展 String 原型，我假设 Brett 在某处有一个 String.prototype.results_count = ...。
他将'json' 作为dataType 参数传递给$.post()。这告诉它在调用回调函数之前在响应上调用JSON.parse()。
@Barmar 我的错，我没有看到。我已经相应地更新了代码并添加了一条注释，解释了为什么我无法提供正确的解决方案。

【解决方案2】：

更新

我终于让它工作了，如果有人感兴趣，下面是代码。我不确定是否可以将$results 从test.php 传递给script.js 中的函数。 console.log($results) 帮助确认 API 查询成功并存储在 $results 中。

function ajaxProductsSearch(){

    products.empty();
    preloader.css('visibility','visible');

    // Issue a request to the proxy
    $.post('test.php', {
        'search' : searchBox.val()
    },
    function($results) { // pass $results from test.php?

        console.log($results);
        if($results.results_count == 0){

            preloader.css('visibility','hidden');
            message.html("We couldn't find anything!").show();
            return false;
        }

        $.each($results.results, function(i,item) { // code to display in view?


            var html = '<a class="product" data-price="$ '+$results.results[i].price+'" href="'+$results.results.url+'" target="_blank">';

            console.log($results.results[0]);
            // If the product has images
            if($results.results[i].images && $results.results[i].images.length > 0){
                html += '<img alt="'+$results.results[i].name+'" src="'+ $results.results[i].images+'"/>';
            }

            html+='<span>'+$results.results[i].name.substr(0, 20)+'</span></a> ';
            products.append(html);
        });

        preloader.css('visibility','hidden');

    },'json');  
}

【讨论】：