使用从 jquery ajax 发布请求到服务器的数据填充 div答案

【问题标题】：populate div with data from jquery ajax post request to server使用从 jquery ajax 发布请求到服务器的数据填充 div
【发布时间】：2015-07-22 00:16:47
【问题描述】：

我认为有一个 jquery 函数可以向服务器发布请求：

<script type="text/javascript">
        jQuery(function ($) {
            $(document).ready(function()
            {
                var form = $('form');
                form.submit(function(e){
                    e.preventDefault();
                    $.ajax({
                        url: form.prop('action'),
                        type: 'post',
                        dataType: 'json',
                        data: form.serialize(),
                        success: function(data)
                        {
                            console.log(data);
                        }

                    })
                });

            });
        });
    </script>

路由返回一个对象数组：

Route::post('modelsearch', function () {

    $brand_id = Input::get('brand_id');
    $size_id = Input::get('size_id');

    $models = DB::table('pants_models')
        ->where('brand_id', '=', $brand_id)
        ->Where('size_id', '=', $size_id)
        ->get();

    return Response()->json(array($models));


});

我想操作返回的数组并将 html 发布到视图中的#results div。在回调成功函数中怎么做？我似乎找不到答案。

【问题讨论】：

标签： jquery ajax laravel response populate

【解决方案1】：

不知道你在问什么。您可以直接在 js 成功调用中操作数据。

success: function(data)
{
    //data contains the response from the route. So manipulate the result here and append them to the #results div.
    var html = '';
    for(obj in data){
    //Do stuff to build html
    }
    $('#result div').append(html);
}

【讨论】：

【解决方案2】：

除非我错过了什么，否则这应该可以解决问题。假设你的路由吐出一个包含 result1 和 result2 键的数组：

success: function(data)
{
    $('#results').append(
        '<p>Result 1: '+data['result1']+'</p><p>Result 2: '+data['result2']+'</p>';
    );
}

【讨论】：

【解决方案3】：

如果您想将数据显示到 div 中，则使用该数据创建一个字符串并将该数据附加到 #results div 中：

var obj = JSON.parse(data);
var resultStr = "";
for(var i=0; i<obj.length; i++){
    resultStr = resultStr + "<div>" + obj[i].column_name + "</div>" ;   
}

$("#results div").html(resultStr);

如果您还有其他需要，请告诉我们。

【讨论】：

我正在尝试这段代码。我得到“Uncaught SyntaxError: Unexpected token o”，这应该意味着 json 被解析了两次。所以我将var obj = JSON.parse(data);这一行修改为var obj = (data);，但在我的div中仍然看不到任何结果，除非我试图以错误的方式访问数据......我还修改了对return Response()->json(($models));的响应，以便它不是一个对象数组，而是将每个对象作为关联数组吐出，但使用 obj[i].name
我终于可以使用以下代码打印数据：success: function(data) { var obj = (data); console.log (obj); var resultStr = ""; for(var i=0; i<obj.length; i++){ resultStr = resultStr + "<div>" + obj[i].column_name + "</div>" ; } console.log(resultStr); $("#results").html(resultStr); }
克里斯，您必须在最后管理其他代码。我刚刚向您发送了相同的逻辑。