我正在进行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对象中提取数据(名称,条形码,售价)。
答案 0 :(得分:0)
在这个答案中,产品将显示在一个表格中,每个产品都有一行
在视图中
@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
}
});
答案 1 :(得分:0)
这里Json是一个对象Array..so应该包含索引。下面的代码告诉我。
var returndata =JSON.parse(data);
document.getElementById("name").value = returndata[0].name;