Question

我有一个页面2.html，如果提交ID号，则会得到一些输出。它适用于Ajax post，在其中我将数据与data参数一起发送。同时，我还有另一个页面1.html，其中包含ID列表。我想要的是，如果我单击1.html中的ID，该单击应将该ID传递给2.html，在2.html上提交表单并显示该页面。

2.html中的表格：

$("#form").on("submit", function(event) {
  $("#results").html("");
  $.ajax({
    data: {
      name: $("#nameInput").val()
    },
    type: "POST",
    url: "/similar"
  }).done(function(data) {
    /* ... */
  });
});

然后单击1.html：

$("#id1").on("click", function(e) {});

Answer 1

必须是POST吗？使用GET链接到带有某些变量的另一个页面更好。您出于安全目的这样做吗？

var href= "2.html?name=" + $('#nameInput').val();

然后在2.html ... php上消化它？

$nameVal = $_GET['name'];

还是前端js？

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

在此处了解有关前端查询字符串的更多信息：

How can I get query string values in JavaScript?

别忘了验证输入的所有输入;）

Answer 2

有几种方法可以做到这一点，最好的方法是在会话中保存值。 1）使用会话
HTML5现在允许在会话中存储值。

 // HTML5 session Storage
 sessionStorage.setItem("id","23");
 sessionStorage.getItem("id");

2）使用Cookies
您可以使用jquery从Cookies设置/获取值。

$.cookie('id', '23', {expires: 1}); // expires in 1 day
var id = $.cookie('id');

3）使用查询字符串
页面1的ID可以作为GET参数查询传递给页面2。例如：page2.htm？id = 23

let searchParams = new URLSearchParams(window.location.search);
let param = searchParams.get('id');

4）Web存储
使用HTML5 Web存储，Web应用程序可以在用户的浏览器中本地存储数据。 // HTML5本地存储 localStorage.setItem（“ id”，“ 23”）; localStorage.getItem（“ id”）;

点击按钮-通过点击传递数据

2 个答案: