如何从ajaxcall返回的json对象中提取值

Posted 2023-03-15

【中文标题】如何从ajaxcall返回的json对象中提取值

【英文标题】：How to extract value from json object that is returned from ajaxcall

【发布时间】：2016-10-13 20:14:09

【问题描述】：

我正在进行 ajax 调用。作为回报，我得到了一些 json 数据。在我的 ajax 调用的成功函数中包含：

$.ajax(
  type: "GET",
  headers: 'X-CSRF-TOKEN': token,
  url:url,
  data: id:id,
  datatype:'json',
  success: function(data) 
    var returndata =JSON.parse(data);
    console.log(returndata);

  
);

所以我正在打印我在 consol 中获得的数据。我的控制台输出显示：

[Object]0: 
    Object
    barcode: "abc"
    name: "barcoded"
    sellPrice: "122"
    unit: "200"
    __proto__:Object
    length: 1
    __proto__: Array[0]

如何从 javascript 变量中的 json 对象中提取数据（名称、条形码、销售价格）。

【问题讨论】：

如果你是 retjrning all() 你不必使用 ajax 你可以使用 jquery 插件！

因为我是个菜鸟，你能告诉我一些关于如何使用带有 php 变量的 jquery 插件，或者你能给我发送任何可能有帮助的链接.. 提前致谢

今晚告诉你怎么做，我现在没空

【参考方案1】：

在这个答案中，产品将显示在一个表格中，每个产品一行

在视图中

@section('content')
<div id="page-wrapper">
    <!-- /.row -->
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1>
                    stocks
                    <a class="btn btn-primary pull-right btn-sm" href=" url('stocks/create') ">
                        Add New Product
                    </a>
                </h1>
                 <div class="input-group col-md-12">
                    <input id="search" name="search" type="text" class="form-control input-lg search" placeholder="Buscar" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div><br>
                <div class="table">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>
                                    S.No
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            -- */$x=0;/* --
            @foreach($stocks as $stock)
                -- */$x++;/* --
                            <tr>
                                <td>
                                     $x 
                                </td>
                                <td>
                                    <a href=" url('stocks', $stock->id) ">
                                         $stock->name 
                                    </a>
                                </td>
                                <td>
                                     $stock->description 
                                </td>
                                <td>
                                    <a href=" url('stocks/' . $stock->id . '/edit') ">
                                        <button class="btn btn-primary btn-xs" type="submit">
                                            Update
                                        </button>
                                    </a>
                                    /
                        !! Form::open([
                            'method'=>'DELETE',
                            'url' => ['stocks', $stock->id],
                            'style' => 'display:inline'
                        ]) !!
                            !! Form::submit('Delete', ['class' => 'btn btn-danger btn-xs']) !!
                        !! Form::close() !!
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

在同一个视图中使用这个

@section('js')
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'></script>
 <script type="text/javascript" src=' url("jquery.quicksearch.js") '></script> // download the plugin and put it inside the publicfolder


<script>
$( document ).ready(function() 
    console.log( "ready!" );
     $('input#search').quicksearch('table tbody tr');
);
</script>


@endsection

您可以从here下载插件，也可以在链接中找到有关该插件的更多信息

这段代码来自我的一个项目，它已经可以工作了（搜索任何 Field 、 name 、 price ...等的工作）

插件名称：快速搜索，由 riklomas 制作，由 DeuxHuitHuit 维护

编辑

如果你想使用ajax你可以这样做

控制器

 use Illuminate\Http\Request; // dont forget to add this at the top

 public function search(Request $request)

    $query = $request->input('searching');
    $stocks = Stock::where('name', 'LIKE', '%' . $query . '%')->get();
    return response()->json($stocks);

不要忘记 视图

中的 CSRF 令牌元

<meta name="csrf-token" content=" csrf_token() " />
 <input type="search" name="searching">

js

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$.ajax(
    url: 'url('/sales/searchproduct')',
    type: 'POST',
    data: _token: CSRF_TOKEN,
    dataType: 'JSON',
    success: function (data) 
        console.log(data); 
        // then use jquery to append data to html
    
);

【讨论】：

嘿，谢谢你的努力，但我不想在我的视图中有一个表格.. 我只想要一个搜索框和一个搜索按钮，它将搜索我传递给的 php 数组视图..

晚上编辑不好，你必须通过 ajax 提交，成功后附加返回的 json 数据

在尝试自己做 ajax 之后，如果我在控制器中的函数中将 $searchdata 作为参数，我现在得到 500（内部服务器错误）

在你的代码中 $stocks = Stock::->where('name', 'LIKE', '%' . $query . '%')->get();给出和错误：语法错误，意外的'->'（T_OBJECT_OPERATOR）......我不确定是否允许在'::'之后使用'->'

抛出错误是因为我在模型之后添加了一个'->'，这样是错误的，'Stock::->' 现在它已修复

【参考方案2】：

这里 Json 是一个对象数组..所以应该包括索引。下面的代码为我工作。

var returndata =JSON.parse(data);
document.getElementById("name").value = returndata[0].name;