logo标签列表

Laravel 4使用局部视图实现ajax

javascriptphpajaxlaravel
3
我刚开始学习 Laravel 4，几天前才开始。我的问题很简单，我有一个下拉框，客户或用户更改它后会呈现一个“部分”视图。
这是我的第一个视图。OnChange 事件：
它将通过 JavaScript 渲染出这个简单的消息。
我的问题是，如果我手动输入值，它只会显示部分视图：
这是控制器中的函数。
    public function getTeste1() {
    $id = Input::get('value');
    if($id=="")
    {
        $this->layout->content = View::make('home.user');
    }
    else
    {
        $this->layout->content = View::make('home.user2')->with('ides',$id);
    }
}

这是我的JavaScript函数：

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="";
url="?value="+str;
//url=url+"&sid="+Math.random();
// alert(url);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(true);
}

这是我的视图：

<h1>Home</h1>

<p>Welcome to your Home. You rock!</p>

<form>
<select name="users" onchange="showCustomer(this.value)">
<option value="0">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<div id="txtHint"></div>

这是我的部分视图：

@if($ides!=0)
<div id="txtHint"> <b>Person info will be listed here -> {{ $ides }} </b></div>
@endif

我知道我有这个问题的原因，但是如果你们知道如何避免它或者其他解决方法的话，将会非常有帮助。
谢谢，
Gonçalo Moura
编辑： 如果我使用你的解决方案，它将显示如下： enter image description here StateChanged函数：
function stateChanged()
{
   if (xmlHttp.readyState==4)
   {
      document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

      // alert(document.getElementById("txtHint").innerHTML);

   }
}

jQuery函数：

<script>
$(document).ready(function() {
$("#users").change(function() {
  $.get('http://localhost/LoginProject/public/home/teste1?value=' + $(this).val(),         function(data) {
    $("#txtHint").html(data);
  });
});
});
</script>
你能展示一下 stateChanged 函数吗？ - Amit Garg
2个回答
3

我会给你一个更简单的整体设计方案。

你不需要改动控制器中的任何东西。

无论是有或没有 Ajax 请求，都返回同样的视图。

只需在布局中进行小小的更改即可。

@if(!Request::ajax())
<html>
....
.... //the whole layout
</html>
@else
{{$content}}
@endif

简单逻辑。

如果请求不是ajax，则返回带有完整模板的视图。

如果请求是ajax，则仅返回视图。

我已经做了一些研究，但是对这种方法感到有些迷茫。我已经有一个布局，我更新了那个视图。{{ $content }} 是我的视图，我只需添加 partialview。我非常新手，已经苦苦挣扎了很长时间。我想做的是通过下拉框的值，在不刷新页面的情况下搜索我的数据库并更新表格中的数据。有关 Laravel Ajax 的教程有很多，但我发现它们并不实用，或者可能我没有理解。您能否为这个特定的例子再帮助我一下。非常感谢您的回答。 - Ratz
你在哪个部分遇到了问题？请告诉我具体是哪一部分，这样我的示例才能更有用。 - itachi
我只想在下拉列表的onchange事件中使用ajax从我的数据库更新一个div，但我不想刷新页面。我的意思是，它按照我现在的方式可以工作，但如果用户更改URL并添加"URL"+"?value=2"，它将仅显示我的部分视图，并且由于我的控制器，它将不会显示下拉列表。我一直在搜索AngularJS和一些教程，它们有很好的例子，就是我想做的。虽然很难理解。我想也许有一种简单的方法来做到这一点。 - Ratz
我主要从事服务器工作，在客户端方面，为了方便起见，我使用jQuery（我不太懂JavaScript）：D。你考虑使用jQuery吗？ - itachi
我有一个能够工作的jQuery函数，但是我与JavaScript所遇到的控制器问题仍然存在。 - Ratz
0

因为您告诉它，如果在URL中找到value，则仅显示部分视图。
这会给您带来问题。

if($id=="")
{
    $this->layout->content = View::make('home.user');
}
else
{
    $this->layout->content = View::make('home.user2')->with('ides',$id);
}


将您的控制器方法更改为以下内容。

public function getTeste1()
{
    $id = Input::get('value', null);

    $this->layout->content = View::make('home.user')->with('id', $id);
}

关于此事的看法

<h1>Home</h1>

<p>Welcome to your Home. You rock!</p>

<form>
    <select name="users" onchange="showCustomer(this.value)">
        <option value="0">Select a person:</option>
        <option value="1">Peter Griffin</option>
        <option value="2">Lois Griffin</option>
        <option value="3">Glenn Quagmire</option>
        <option value="4">Joseph Swanson</option>
    </select>
</form>

<div id="txtHint">
    @if ($id)
        show detail without AJAX call. Since ID is in URL, you can get the info directly
    @else
        show info that this container will hold some data after AJAX call
    @endif
</div>

并且要把你的代码写得好，这是为了你自己好 :)

我知道问题所在，但是我不知道如何避免它。 - Ratz
检查答案。在视图中进行一些逻辑处理也是很好的。 - Andreyco
谢谢您的回答，也许我没有理解：\ 但是我使用了您的代码进行了编辑。 - Ratz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接