Ajax检索html而不是json

时间:2015-05-25 20:14:25

标签: ajax laravel-5

我遇到了ajax方法的问题,它检索了一个html文件而不是json,我不知道为什么会发生这种情况,因为它在我的家乡路线中完美运行,但是当我尝试在我的创建中实现它时路由,ajax方法不能正常工作

路线档案

Route::get('home', 'HomeController@index');
Route::get('suggestions',[
'as' => 'suggestions_path',
'uses' => 'SuggestionController@index'
]);
Route::get('suggestions/create',[
'as' => 'suggestions_path',
'uses' => 'SuggestionController@create'
]);
Route::get('ajax_scrap_app',[
'as' => 'ajax_scrap_app_path',
'uses' => 'AjaxController@getAppOpenGraph'
]);

的HomeController

<?php namespace App\Http\Controllers;

use App\Level;

class HomeController extends Controller {

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard to the user.
     *
     * @return Response
     */
    public function index()
    {
        $levels = Level::all();
        //dd($levels);


        return view('home')->with('levels',$levels);
    }

}

SuggestionController

    <?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Http\Requests\SuggestionRequest;
use App\Level;
use App\Scrap;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Suggestion;

class SuggestionController extends Controller {

    public function __construct()
    {
        $this->middleware('auth');
    }
    /**
     * Despliega todas las sugerencias hechas por el usuario
     *
     * @return Response
     */
    public function index()
    {

        $suggestions = Auth::user()->suggestions()->latest()->get();
        return view('suggestions.all')->with('suggestions',$suggestions);
    }

    /**
     * Despliega la forma para crear una sugerencia
     *
     * @return Response
     */
    public function create()
    {
        $levels = Level::all();
        return view('suggestions.create')->with('levels',$levels);
    }

    /**
     * Guarda la nueva sugerencia
     * @param SuggestionRequest $request
     * @return Response
     */
    public function store(SuggestionRequest $request)
    {
        $suggestion = new Suggestion($request->all());
        Auth::user()->suggestions()->save($suggestion);
        return redirect('suggestions');
    }

    /**
     * Despliega una sugerencia específica, basados en el id
     *
     * @param  int  $id
     * @return Response
     */
    public function show($id)
    {
        $openGraph = new Scrap();
        $suggestion = Suggestion::find($id);

        return view('suggestions.show')->with(['suggestion' => $suggestion, 'openGraph' => $openGraph]);
    }

    /**
     * Despliega la forma para editar una sugerencia específica, basados en el id
     *
     * @param  int  $id
     * @return Response
     */
    public function edit($id)
    {
        $suggestion = Suggestion::find($id);
        return view('suggestions.edit')->with('suggestion',$suggestion);
    }

    /**
     * Actualiza la sugerencia
     *
     * @param  int  $id
     * @param SuggestionRequest $request
     * @return Response
     */
    public function update($id, SuggestionRequest $request)
    {
        $suggestion = Suggestion::find($id);
        $suggestion->update($request->all());
        return redirect('suggestions');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function destroy($id)
    {
        //
    }

}

这是我到目前为止的ajax方法

$('#app_url').on('focusout',function(e){
    var appURL = e.target.value;
    console.log("appURL: "+appURL);
    /* AJAX */
    $.get('ajax_scrap_app?app_url='+appURL, function (data) {
        console.log(data);
        console.log("THIS IS THE TITLE: "+data[0].title);
        console.log("THIS IS THE DESCRIPTION: "+data[0].description);
        console.log("THIS IS THE IMAGE: "+data[0].image);
        $('#app_title').val(data[0].title);
        $('#app_description').val(data[0].description);
        $('#app_image').val(data[0].image);

    });
});

这是AjaxController

public function getAppOpenGraph(){
    $scrap = new Scrap();
    $url = Input::get('app_url');
    $scrap::setUrl($url);
    $title = $scrap::getOpenGraphTitle();
    $description = $scrap::getOpenGraphDescription();
    $image = $scrap::getOpenGraphImg();
    $openGraph = [['title'=>$title,'description'=>$description,'image'=>$image]];
    return Response::json($openGraph);

}

主页输出(http://localhost/exaproject/public/home

appURL: https://itunes.apple.com/us/app/crossy-road-endless-arcade/id924373886?mt=8&v0=WWW-NAUS-ITSTOP100-FREEAPPS&l=en&ign-mpt=uo%3D4
[Object]
THIS IS THE TITLE: Crossy Road - Endless Arcade Hopper
THIS IS THE DESCRIPTION: Get Crossy Road - Endless Arcade Hopper on the App Store. See screenshots and ratings, and read customer reviews.
THIS IS THE IMAGE: http://a3.mzstatic.com/us/r30/Purple7/v4/20/7a/c2/207ac26e-66f1-1ee0-1f70-c4733a9015a1/icon320x320.png

OUTPUT表单创建页面(http://localhost/exaproject/public/suggestions/create

appURL: https://itunes.apple.com/us/app/crossy-road-endless-

arcade/id924373886?mt=8&v0=WWW-NAUS-ITSTOP100-FREEAPPS&l=en&ign-mpt=uo%3D4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Apprendiendo</title>

    <link href="http://localhost/exaproject/public/css/app.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">-->
    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
            <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Apprendiendo</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://localhost/exaproject/public">Home</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Sugerencias <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="http://localhost/exaproject/public/suggestions/create">Crear Sugerencia</a></li>
                        <li><a href="http://localhost/exaproject/public/search">B&uacute;scar Sugerencias</a></li>
                        <li><a href="http://localhost/exaproject/public/suggestions">Mis Sugerencias</a></li>
                    </ul>
                </li>
                <li><a href="http://localhost/exaproject/public/plan">Mi Plan</a></li>
                <li><a href="http://localhost/exaproject/public/profile">Mi perfil</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">
                                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Angel Salazar <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="http://localhost/exaproject/public/auth/logout">Logout</a></li>
                        </ul>
                    </li>
                            </ul>
        </div>
    </div>
</nav>    
    <div class="container">

    </div>

    <!-- Scripts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://localhost/exaproject/public/js/app.js"></script>
</body>
</html>

THIS IS THE TITLE: undefined
THIS IS THE DESCRIPTION: undefined
THIS IS THE IMAGE: undefined

我很感激一些帮助!!!

2 个答案:

答案 0 :(得分:0)

默认情况下,视图会像您一样返回字符串内容:

public function create()
{
    $levels = Level::all();

    // here you are calling an hmlt/text output
    return view('suggestions.create')->with('levels',$levels);
}

这是您收到HTML回复的主要原因。有两种选择:

  1. 返回json中的渲染视图:

    public function create()
    {
        $levels = Level::all();
    
        // here you are calling an hmlt/text output
        $output = view('suggestions.create')->with('levels',$levels)->render();
        return response()->json(['html' => $output]);
    }
    

    通过这种方式,您可以读取ajax中的响应,可以像data.html

  2. 一样调用json
  3. 避免返回视图。如果你想要json普通数据,那就适用于:

    public function create()
    {
        // Do some logic here
    
        // Return json data
        return response()->json(['foo' => 'bar']);
    }
    
  4. 最后,看起来你正在使用RESTful控制器,没关系,但资源控制器没有返回html数据。

答案 1 :(得分:0)

我做到了,我不确切知道为什么,但那些是我做的改变

Route.php

Route::get('suggestions/create/ajax_scrap_app',[
'as' => 'ajax_scrap_app_path',
'uses' => 'AjaxController@getAppOpenGraph'
]);

Ajax方法

$('#app_url').on('focusout',function(e){
        var appURL = e.target.value;
        console.log("appURL: "+appURL);
        /* AJAX */
        $.get('create/ajax_scrap_app?app_url='+appURL, function (data) {
            console.log(data);
            console.log("THIS IS THE TITLE: "+data[0].title);
            console.log("THIS IS THE DESCRIPTION: "+data[0].description);
            console.log("THIS IS THE IMAGE: "+data[0].image);
            $('#app_title').val(data[0].title);
            $('#app_description').val(data[0].description);
            $('#app_image').val(data[0].image);

        },'json');
    });