Question

因此，我有一个搜索栏，仅用于查找某人的保单，因此，当他们搜索其保单号时，它会向他们返回一些详细信息，包括声明和保单措辞。所有这些都运行良好，但是只是添加了详细信息，而是作为重定向回同一页面的原因，因此我希望它与ajax一起运行，以便搜索全部在一页上进行。我有一个要传递给刀片服务器的数组，现在我想用ajax显示该信息，因为当前它位于一个隐藏的div中，但似乎不起作用？

路线：

Route::get('/widgets/policy-wording', 'FrontendWidgets\PolicyWordingController@policyWordingPage');
Route::any('/search', 'FrontendWidgets\PolicyWordingController@search');

控制器：

public function search(Request $request) {

if ($this->validate($request, [
    'ordernumber' => 'string|min:8|max:16',
], [
    'ordernumber.string' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
    'ordernumber.min' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
    'ordernumber.max' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
]));

    try {
    $order = Order::findOrFail(decodeFullOrderNumber($request->ordernumber));
    } catch (ModelNotFoundException $exception) {
        return back()->withError('We could not find this policy number in our system, please try again')->withInput();
    }

      $description = $order->scheme->Description;
      $phonenumber = $order->scheme->ClaimsTelephone1;
      $policyurl = $order->scheme->PolicyURL;


      $policyinfo = array($description, $phonenumber, $policyurl);


     return response()->json([
            'status' => 'ok', 
            'policyinfo' => $policyinfo,
            'title' => "Policy Wording"
            ]);

}

刀片：

<form class="form-horizontal" role="form" id="policy-documents-search-form" action="/search">
    {{ csrf_field() }}
    <fieldset>

        <div class="form-group">
            <label for="username" class="col-sm-6 control-label">Enter your policy number</label>
            <div class="col-sm-8">
                <input type="text" name="ordernumber" id="ordernumber" class="form-control"/>
                <span class="text-danger">{{ $errors->first('ordernumber') }}</span>
            </div>
        </div>

            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button type="submit" class="btn btn-primary" id="search-button">Search</button>
            </div>
        </div>

         <div class="form-group" id="form-group" style="display:none;">
                <div class="container">
                @if(isset($policyinfo))
                <h2>Your Policy Details</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Claims Telephone</th>
                            <th>Policy Wording</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="name">{{ $policyinfo[0] }}</td>
                            <td id="phonenumber">{{ $policyinfo[1] }}</td>
                            <td id="policywording"><a href="{{ $policyinfo[2] }}">Policy Wording </a></td>
                        </tr>
                    </tbody>
                </table>
                @endif
            </div>


            </div>
        </div>


    </fieldset>
</form>

刀片式脚本：

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous">
</script>
<script>
 $.ajax({
 type: "POST",
 url: '{{ url('/search') }}',
 data: {
   rdernumber: $('#ordernumber').val()
  },
  dataType: 'JSON',
 success: function(response) {
 if(response.status == 'ok'){
    $("#form-group").show();
    $("#form-group").append("<td>" + response.policyinfo[0] + "</td>", "<td>" + response.policyinfo[1] + "</td>", "<td>" + response.policyinfo[2] + "</td>");
 }
 }
 });
  </script>

Answer 1

您需要检测请求是否为ajax，然后以json格式返回响应数据。

在您的搜索方法中，检查请求是否为ajax()的ajax，或者请求期望使用方法wantsJson()的json格式的响应：

 if ($request->ajax() || $request->wantsJson()) {
  //your code here
 }

应使用response()->json()方法返回响应

return response()->json($response);

或您的情况：

return response()->json([
'status'=> 'ok', //in case you have errors, it is recommended to let know the frontend of your app whether status is ok or has an error 
'policyinfo' => $policyinfo,
]);

，并且应该返回该值，而不是您的view()方法返回值。

在前端部分，以json格式处理响应节点

注意，我已修复一些拼写错误和语法错误，留下了一些注释，但是您需要修复刀片模板以与这些注释和新代码相对应：

$.ajax({
    type: "POST",
    url: '{{ url('/search') }}',
    data: {
        'Description': $('#policyinfo-0').val(), //I have corrected these, first you cannot have split wording for object keys, second, not sure from where you pick up the values, but you need to add some inputs with propert IDs
        'ClaimsTelephone': $('#policyinfo-1').val(),
        'PolicyWording': $('#policyinfo-2').val()
},
dataType: 'JSON',
    success: function(response) {
    if(response.status == 'ok'){
        $("#form-group").show();

        $("#form-group").append("<td>" + response.policyinfo[0] + "</td>", "<td>" + response.policyinfo[1] + "</td>", "<td>" + response.policyinfo[2] + "</td>");
    }

}
});

Answer 2

您知道... res.status(200).send(` <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> ${styles} ${title} </head> <body> <div id="root">${appString}</div> <script src="app.js" defer></script> <script src="myFile.js" defer></script> </body> </html> `); ...是否返回JSON吗？

Ajax / jQuery使用数组在Laravel中填充表

2 个答案: