Question

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

myderby.jar

所以我正在打印我正在进入的数据。我的consol输出显示：

$.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);

  }
});

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

Answer 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下载插件，也可以在链接中找到有关该插件的更多信息

此代码来自我的项目，它已经可以使用（搜索任何字段，名称，价格......等等）

插件名称快速搜索，由deuxHuitHuit维护的riklomas制作

修改

如果你想使用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 } });

Answer 2

这里Json是一个对象Array..so应该包含索引。下面的代码告诉我。

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

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

2 个答案: