将参数传递到 MVC PHP 控制器，无需提交按钮即可打开新页面

Question

我有一个包含图像的页面。在每个图像中，都有一个 onClick 事件和一个 id，用于查看该配方的详细信息。单击时，它通过 AJAX 转到控制器中的操作，从而使用 Twig 生成新视图。问题是它不会重新加载（不是提交按钮），当我将响应分配给html时，新页面开头的菜单不起作用。而且，此外，不会更改URL（仅当我制作那个棘手的window.history.pushState时，并且在刷新页面之前无法将历史记录回溯）

断续器

<img src="{{recipe.image}}" onclick="showDetail()" id={{recipe.id}}>

断续器

function showDetail() {

  var detailId = $(event.target).attr('id');

  $.ajax({

    type: "post",

    url: "showDetail",

    dataType: "html",

    data: {id:detailId},

    success: function(res){

      // $("html").html(res); // this one makes menus don't work

    },

    error: function(jqXHR, textStatus, errorThrown){ $("#respRecipe").html(textStatus + ' ' + jqXHR.status + ' ' + errorThrown); }

  });

控制器

public function showDetailAction($params) {

    $model = new DetailModel;

    $recipeData = $model->recipeDataDB($params["id"]);

    View::renderTwig('Detail/detail.html', array('recipeData'=>$recipeData[0],

    'ingredientsData'=>$recipeData[1], 'commentsData'=>$recipeData[2]));

}

routes.json （我可以更改这个以接受参数而不需要AJAX吗？

"showDetail": {

    "controller": "DetailController",

    "action": "showDetail"

 },

.htaccess

<IfModule mod_rewrite.c>

    RewriteEngine on

    RewriteRule ^([a-zA-Z0-9\-\_\/]*)$ index.php?p=$1

</IfModule>

我不知道我是否可以，但图像内隐藏了一个提交按钮...主要问题是刷新页面，URL和工作菜单。

提前致谢。

Answer 1

问题是它不会重新加载（不是提交按钮），当我将响应分配给html时，新页面开头的菜单不起作用。使用Ajax调用，页面不重新加载。假设Ajax发出请求并在不重新加载的情况下获得响应而且，此外，不会更改URL（仅当我制作那个棘手的window.history.pushState时，并且在刷新页面之前无法将历史记录回溯）通常使用Ajax，我们不会更改URL，除非我们打算转到不同的页面路由。您可以更改 html 标记的包含，如果您像现在这样得到正确的响应。

Answer 2

解决！我创建了一个 Cookie，该 Cookie 会在 5 秒后过期。控制台中没有错误，菜单工作正常:)function showDetail() {&nbsp; var d = new Date();&nbsp; d.setTime(d.getTime() + 5000);&nbsp; var expires = "expires=" + d.toUTCString();&nbsp; document.cookie = "idRecipe=" + $(event.target).attr("id") + "; " + expires;&nbsp; location.href = "detail";}public function showDetailAction() {&nbsp; &nbsp; $model = new DetailModel;&nbsp; &nbsp; $recipeData = $model->recipeDataDB($_COOKIE["idRecipe"]);&nbsp; &nbsp; View::renderTwig('Detail/detail.html', array('recipeData'=>$recipeData[0],&nbsp; &nbsp; 'ingredientsData'=>$recipeData[1], 'commentsData'=>$recipeData[2]));}

Answer 3

您可能在某个地方遇到了Javascript错误，请在控制台（F12）中查看。AJAX 请求的理念不是重新加载页面，而是从服务器请求信息，并能够处理返回的数据，而无需刷新页面。如果它正在刷新页面，这通常是JS错误的错误，尽管在您的情况下，您要求使用刷新所有html，这并不理想。$("html").html(res);因此，在 AJAX 成功之后，请尝试执行类似 .如果您从 AJAX 调用获得成功的响应（您可以找出答案），则会收到结果。您需要将 div 添加到 HTML 中。$('#myDiv').html(res);console.log(res);<div id="myDiv"></div>一旦你在不刷新页面的情况下显示结果，你可以发回一个比由页面的所有HTML组成的模板小得多的HTML块。<div id="myDiv"></div>

Answer 4

尝试将容器放在页面中，并加载从 AJAX 返回的数据。该语句替换从 AJAX 响应返回的整个内容，而不是使用一些加载结果的 div$("html").html(res);$("div#YOURID").html(res);需要更多详细信息，因为也许您的菜单需要一些jQuery初始化等。