英文:
Passing data among different HTML pages
问题
我是PHP的新手，非常迷茫。
我正在使用HTML5、CSS3、jQuery和Bootstrap 4。
我的网站总共有4个HTML页面。在第一个页面上有4个带有文本的方块（假设是A、B、C和D），用户选择其中一个方块，然后点击“下一步”按钮。在点击“下一步”时，用户将进入第2页，但是根据用户在第1页（A、B、C或D）的选择，需要更新此页面。类似地，需要将第2页和第1页的数据传递到第3页。
我了解了通过URL、AJAX、PHP会话等方式来实现这一点，但由于我是新手，所以非常困惑。
请指导我如何在不同页面之间传递数据？
编辑：我没有使用表单。
英文:
I'm new to PHP and very lost.
I'm working with HTML5, CSS3, jQuery and Bootstrap 4.
I have a total of 4 HTML pages on my website. In the first page there are 4 squares with text (let's say A, B, C and D), user selects one of those squares and then presses the "Next" button. On click of this "next" user is taken to page 2 but this page needs to be updated according to user's selection in page 1 (A, B, C or D). And similarly data from page 2 and page 1 needs to be taken to page 3.
I read about doing it via URLs, AJAX, PHP sessions and a few more things, but since I'm new at this I'm very confused.
Please guide as to how can I pass data among different pages?
EDIT: I've not used forms.
答案1
得分: 2
- 如果您想存储或记录用户的交互（用于电子商务或社交网络等目的），则需要在某个时刻将数据传递到服务器（可能在使用本地存储对象后），PHP为我们提供了两种常用机制来将数据从客户端传递到服务器端：通过HTML表单的$_GET和$_POST，这些可以保持使用cookie或会话。
- 如果在页面之间传递的数据永远不会对网站的功能产生任何作用，那么可以使用本地存储对象，本地存储对象在需要存储大量数据在用户客户端上时特别有用，而不是在每个请求时获取这个昂贵的资源，以增强用户体验并减少服务器负载。
英文:
There method depends on the purpose, this is one of the fundamental concepts and components in web development.
- If you want to store or record your users interaction (for e-commerce, or social networking purposes) you will need the data to be passed to the server at some point (maybe after using a local storage object), there are 2 commonly used mechanisms PHP gives us to pass data from the client side to server side: $_GET & $_POST through a HTML from, and these can persist used cookies or sessions
- If the data passed between pages is never going to provide any purpose for the site's function, then the local storage object may be used, the local storage object is particularly useful when large amounts of data may be stored on the users client, rather than fetching this expensive resource per request, to enhance user experience and minimise server load
答案2
得分: 1
你可以使用 localstorage 来实现这个。
第一页：（first.html）
localStorage.setItem("square_first", "A");
第二页：（second.html）
localStorage.getItem("square_first");
英文:
You can do this with use of localstorage
First Page: (first.html)
localStorage.setItem("square_first", "A");
Second Page: (second.html)
localStorage.getItem("square_first");
答案3
得分: 1
你可以使用本地存储，以下示例将确实帮助你。
在HTML页面1：
window.onload = function() {
var sqa = prompt("square: ","A");
localStorage.setItem("SQA",sqa);
}
在HTML页面2：
window.onload = alert(localStorage.getItem("SQA"));
你可以使用cookie，但存储是更好的选择，因为页面请求不会发送到服务器。
英文:
You can use local storage following example will definitely help you.
on HTML page 1:
window.onload = function() {
var sqa = prompt("square: ","A");
localStorage.setItem("SQA",sqa);
}
On HTML page 2:
window.onload = alert(localStorage.getItem("SQA"));
You can use cookies but storage is better option as page request is not sent to server.
答案4
得分: 1
以下是您提供的HTML代码的翻译部分：
<!DOCTYPE html>
<html>
<head>
<title>在不同HTML页面之间传递数据</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<p>部分-A</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<input type="hidden" name="dataA" id="dataA" value="示例数据A"/>
<button class="send_data" value="A">下一步</button>
</div>
<div>
<p>部分-B</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<input type="hidden" name="dataB" id="dataB" value="示例数据B"/>
<button class="send_data" value="B">下一步</button>
</div>
<div>
<p>部分-C</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<input type="hidden" name="dataC" id="dataC" value="示例数据C"/>
<button class="send_data" value="C">下一步</button>
</div>
<div>
<p>部分-D</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<input type="hidden" name="dataD" id="dataD" value="示例数据D"/>
<button class="send_data" value="D">下一步</button>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(".send_data").click(function(event){
var url="";
let sec = $(this).prop("value");
let data = $('#data'+sec).val();
if (sec=="A"){
url = 'demoA.html';
} else if (sec=="B"){
url = 'demoA.html';
}
else if (sec=="C"){
url = 'demoA.html';
}
else if (sec=="D"){
url = 'demoA.html';
}
var form = $('<form action="' + url + '" method="post">' +
'<input type="text" name="data" value="'+data+'" />' +
'</form>');
$('body').append(form);
form.submit();
});
});
</script>
英文:
<html>
<head>
<title>Passing data among different HTML pages</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<p>Section-A</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataA" id="dataA" value="sample data A"/>
<button class="send_data" value="A">Next</button>
</div>
<div>
<p>Section-B</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataB" id="dataB" value="sample data B"/>
<button class="send_data" value="B">Next</button>
</div>
<div>
<p>Section-C</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataC" id="dataC" value="sample data C"/>
<button class="send_data" value="C">Next</button>
</div>
<div>
<p>Section-D</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataD" id="dataD" value="sample data D"/>
<button class="send_data" value="D">Next</button>
</div>
</body>
</html>
<script>
$(document).ready(function() {
 
  $(".send_data").click(function(event){
  
var url="";
let sec = $(this).prop("value");
let data = $('#data'+sec).val();
if (sec=="A"){
url = 'demoA.html';
} else if (sec=="B"){
url = 'demoA.html';
}
else if (sec=="C"){
url = 'demoA.html';
}
else if (sec=="D"){
url = 'demoA.html';
}
var form = $('<form action="' + url + '" method="post">' +
'<input type="text" name="data" value="'+data+'" />' +
'</form>');
$('body').append(form);
form.submit();
  });
  
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论