将参数传递到 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() {

  var d = new Date();

  d.setTime(d.getTime() + 5000);

  var expires = "expires=" + d.toUTCString();

  document.cookie = "idRecipe=" + $(event.target).attr("id") + "; " + expires;

  location.href = "detail";

}

public function showDetailAction() {

    $model = new DetailModel;

    $recipeData = $model->recipeDataDB($_COOKIE["idRecipe"]);

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

    '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初始化等。