请求的内容,而不重新加载页面 [英] Requesting content without reloading the page
本文介绍了请求的内容,而不重新加载页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用一个选择
元素移动设备上查看我的网站。以下是选择
选项。
I want to use a select
element for mobile viewing of my website. Following is the select
options.
HTML:
<select name="select-choice-8" id="select-choice-nc">
<optgroup label="News">
<option value="feature">Fea</option>
<option value="current">Current</option>
<option value="research">Research</option>
</optgroup>
<optgroup label="Archive">
<option value="archive">Archive</option>
</optgroup>
<optgroup label="Video">
<option value="">Video</option>
</optgroup>
<optgroup label="Submit">
<option value="">Story</option>
<option value="">Event</option>
</optgroup>
</select>
我想使用JavaScript / jQuery的基于一些AJAX调用做什么用户,以避免重新加载整个页面(如填充返回的AJAX内容的容器)中选择。
I want use JavaScript / jQuery to do some AJAX calls based on the what the user selects in order to avoid reloading the whole page (e.g. filling a container with the returned AJAX content).
我需要一些想法或例子来解决这个问题。
I need some ideas or examples to solve this problem.
在此先感谢。
推荐答案
试试这个: HTTP:/ /shaquin.tk/experiments/select-ajax2.html 。
HTML:
<select name="select-choice" id="select-choice">
<optgroup label="News">
<option value="feature">Feature</option>
<option value="current">Current</option>
<option value="research">Research</option>
</optgroup>
<optgroup label="Archive">
<option value="archive">Archive</option>
</optgroup>
<optgroup label="Video">
<option value="video">Video</option>
</optgroup>
<optgroup label="Submit">
<option value="story">Story</option>
<option value="event">Event</option>
</optgroup>
</select>
<div id="article">Please select an article to view.</div>
JS:
var origText = '';
$(document).ready(function() {
origText = $('#article').text();
$('select').on('change', changed);
});
function changed(e) {
$('#article').html('<span class="loading">Loading...</span>');
$('#article').load('content.php', $.param({0: e.target.value, 1: origText}));
}
PHP:
<?php
$selected = $_GET[0];
$articles = array(
'' => $_GET[1],
'feature' => 'Feature article goes here',
'current' => '<p>Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.</p>',
'research' => 'You selected <code>research</code>',
'archive' => 'Archives',
'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>',
'story' => 'Submit a story',
'event' => 'Submit an event'
);
$article = $articles[$selected];
echo $article;
?>
CSS(可选):
body {
background: #ccc;
text-align: center
}
#article {
padding: 30px;
margin: 20px;
text-align: left;
background: #eee;
text-shadow: 1px 1px #fff;
text-shadow: 0 0 3px #fff;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.loading {
text-transform: uppercase;
font-size: 15pt;
text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;
}
在PHP中,你可能会想获取从数据库中全文:。 PHP - 库MySQLi
In the PHP, you would probably want to fetch the text from a database: PHP - MySQLi.
这篇关于请求的内容,而不重新加载页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文